/* Probleempagina */

body.single-probleem #page {
	width: 100%;
	max-width: none;
	margin: 0;
}

body.single-probleem #content {
	width: 100%;
	max-width: none;
	padding: 0;
}

.wg-problem-page {
	width: 100%;
}

.wg-problem__container {
	width: min(calc(100% - 48px), var(--wg-container-width));
	margin-inline: auto;
}

.wg-problem__hero {
	padding: 64px 0 68px;
	background:
		linear-gradient(
			135deg,
			#edf7f3 0%,
			#ffffff 58%,
			#f4f8fa 100%
		);
	border-bottom: 1px solid #e1e8ed;
}

.wg-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	color: #6a7887;
	font-size: 14px;
	line-height: 1.5;
}

.wg-breadcrumbs a {
	color: #0f735a;
	text-decoration: none;
}

.wg-breadcrumbs a:hover,
.wg-breadcrumbs a:focus {
	text-decoration: underline;
}

.wg-problem__title {
	max-width: 850px;
	margin: 0;
	color: #102033;
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.04em;
}

.wg-problem__intro {
	max-width: 760px;
	margin: 22px 0 0;
	color: #526173;
	font-size: 19px;
	line-height: 1.7;
}

.wg-problem__hero .wg-button {
	margin-top: 30px;
}

.wg-problem__content {
	padding: 64px 0 88px;
	background: #ffffff;
}

.wg-problem__section {
	max-width: 780px;
}

.wg-problem__section h2 {
	margin: 52px 0 18px;
	color: #102033;
	font-size: clamp(27px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.wg-problem__section h2:first-child {
	margin-top: 0;
}

.wg-problem__section h3 {
	margin: 34px 0 12px;
	color: #173047;
	font-size: 22px;
	font-weight: 750;
	line-height: 1.3;
}

.wg-problem__section p,
.wg-problem__section li {
	color: #4f6071;
	font-size: 17px;
	line-height: 1.75;
}

.wg-problem__section ul,
.wg-problem__section ol {
	padding-left: 24px;
}

.wg-problem__section img {
	margin: 28px 0;
	border-radius: 14px;
}

@media (max-width: 700px) {
	.wg-problem__title {
		font-size: 38px;
		line-height: 1.08;
		overflow-wrap: normal;
		word-break: normal;
	}

	.wg-problem__visual {
		margin-top: 0;
	}

	.wg-problem__visual-image-wrap {
		max-width: 320px;
		min-height: auto;
	}

	.wg-problem__visual-image {
		max-width: 320px;
	}

	.wg-problem__visual-status {
		right: 0;
		bottom: 0;
	}
}


.wg-problem__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.wg-problem__meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 170px;
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid #d7e3e9;
	border-radius: 11px;
}

.wg-problem__meta-icon {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #0f735a;
	background: #edf7f3;
	border: 1px solid #d5e7ef;
	border-radius: 10px;
}

.wg-problem__meta-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wg-problem__meta-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.wg-problem__meta-label {
	margin-bottom: 3px;
	color: #71808f;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wg-problem__meta-item strong {
	color: #173047;
	font-size: 14px;
	line-height: 1.4;
}

@media (max-width: 700px) {
	.wg-problem__meta {
		display: grid;
		grid-template-columns: 1fr;
	}

	.wg-problem__meta-item {
		min-width: 0;
	}
}

.wg-problem-steps {
	margin-top: 54px;
}

.wg-problem-steps__list {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.wg-problem-steps__item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 18px;
	padding: 24px;
	background: #f8fbfc;
	border: 1px solid #dce7ec;
	border-radius: 14px;
}

.wg-problem-steps__number {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: #ffffff;
	background: #0f735a;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 800;
}

.wg-problem-steps__content h3 {
	margin: 1px 0 8px;
	color: #102033;
	font-size: 20px;
	line-height: 1.35;
}

.wg-problem-steps__content p {
	margin: 0;
}

.wg-problem__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
	align-items: center;
	gap: 72px;
}

.wg-problem__hero-content {
	min-width: 0;
}

.wg-problem__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.wg-problem__visual-image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 520px;
	min-height: 390px;
}

.wg-problem__visual-image {
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
}

.wg-problem__visual-status {
	position: absolute;
	right: 20px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 15px;
	color: #14283d;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #dbe7ec;
	border-radius: 12px;
	box-shadow: 0 14px 35px rgba(15, 35, 52, 0.14);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.wg-problem__visual-status span {
	display: grid;
	place-items: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: #ffffff;
	background: #08658b;
	border-radius: 50%;
	font-size: 12px;
}

@media (max-width: 980px) {
	.wg-problem__hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.wg-problem__hero-content {
		width: 100%;
	}

	.wg-problem__visual {
		width: 100%;
		justify-content: center;
	}

	.wg-problem__visual-image-wrap {
		max-width: 430px;
		min-height: 300px;
	}
}

@media (max-width: 700px) {
	.wg-problem__visual {
		margin-top: 30px;
	}

	.wg-problem__visual-image-wrap {
		max-width: 360px;
		min-height: auto;
	}

	.wg-problem__visual-image {
		max-width: 360px;
	}

	.wg-problem__visual-status {
		right: 4px;
		bottom: 4px;
	}
}


@media (max-width: 700px) {
	.wg-problem-steps__item {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 14px;
		padding: 20px 18px;
	}

	.wg-problem-steps__number {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
}

.wg-problem-supplies {
	margin-top: 44px;
	padding: 26px;
	background:
		linear-gradient(
			135deg,
			#edf7f3 0%,
			#f8fbfc 100%
		);
	border: 1px solid #d6e5ec;
	border-radius: 16px;
}

.wg-problem-supplies__heading {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.wg-problem-supplies__icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #ffffff;
	background: #0f735a;
	border-radius: 12px;
}

.wg-problem-supplies__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wg-problem-supplies__heading h2 {
	margin: 0 0 5px;
	font-size: 24px;
}

.wg-problem-supplies__heading p {
	margin: 0;
	font-size: 15px;
}

.wg-problem-supplies__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.wg-problem-supplies__list li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 11px 13px;
	color: #173047;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid #dce8ed;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
}

.wg-problem-supplies__list li span {
	display: grid;
	flex: 0 0 22px;
	place-items: center;
	width: 22px;
	height: 22px;
	color: #ffffff;
	background: #0f735a;
	border-radius: 50%;
	font-size: 11px;
}

@media (max-width: 700px) {
	.wg-problem-supplies {
		padding: 22px 18px;
	}

	.wg-problem-supplies__list {
		grid-template-columns: 1fr;
	}
}

.wg-problem-causes {
	margin-top: 48px;
}

.wg-problem-causes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.wg-problem-causes__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px;
	background: #ffffff;
	border: 1px solid #dce7ec;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(15, 32, 51, 0.035);
}

.wg-problem-causes__icon {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #0f735a;
	background: #edf7f3;
	border: 1px solid #d5e7ef;
	border-radius: 11px;
}

.wg-problem-causes__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wg-problem-causes__item h3 {
	margin: 1px 0 8px;
	font-size: 19px;
	line-height: 1.35;
}

.wg-problem-causes__item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

@media (max-width: 700px) {
	.wg-problem-causes__grid {
		grid-template-columns: 1fr;
	}
}

.wg-problem-parts {
	margin-top: 48px;
	padding: 28px;
	background: #0b4f71;
	border-radius: 18px;
	box-shadow: 0 22px 48px rgba(15, 32, 51, 0.14);
}

.wg-problem-parts__heading {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 24px;
}

.wg-problem-parts__icon {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	width: 46px;
	height: 46px;
	color: #0f735a;
	background: #ffffff;
	border-radius: 12px;
}

.wg-problem-parts__icon svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wg-problem-parts__heading h2 {
	margin: 0 0 5px;
	color: #ffffff;
	font-size: 26px;
}

.wg-problem-parts__heading p {
	margin: 0;
	color: #d7e7ee;
	font-size: 15px;
}

.wg-problem-parts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.wg-problem-parts__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px;
	background: #ffffff;
	border-radius: 13px;
}

.wg-problem-parts__item h3 {
	margin: 0 0 9px;
	color: #102033;
	font-size: 20px;
}

.wg-problem-parts__item p {
	margin: 0;
	color: #5b6b7b;
	font-size: 15px;
	line-height: 1.65;
}

.wg-problem-parts__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	color: #0f735a;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

.wg-problem-parts__link:hover,
.wg-problem-parts__link:focus {
	text-decoration: underline;
}

@media (max-width: 700px) {
	.wg-problem-parts {
		padding: 22px 18px;
	}

	.wg-problem-parts__grid {
		grid-template-columns: 1fr;
	}
}
/* Veelgestelde vragen */
.wg-problem-faq {
	margin-top: 54px;
}

.wg-problem-faq__heading {
	margin-bottom: 22px;
}

.wg-problem-faq__heading h2 {
	margin: 0 0 9px;
	color: #102033;
	font-size: clamp(27px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.wg-problem-faq__heading p {
	margin: 0;
	color: #5b6b7b;
	font-size: 16px;
	line-height: 1.65;
}

.wg-problem-faq__list {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #dce5eb;
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(15, 32, 51, 0.08);
}

.wg-problem-faq__item {
	margin: 0;
	background: #ffffff;
	border-bottom: 1px solid #e5ebef;
}

.wg-problem-faq__item:last-child {
	border-bottom: 0;
}

.wg-problem-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 21px 23px;
	color: #173047;
	font-size: 17px;
	font-weight: 750;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wg-problem-faq__question::-webkit-details-marker {
	display: none;
}

.wg-problem-faq__question::marker {
	display: none;
	content: "";
}

.wg-problem-faq__question:hover {
	background: #f6fafc;
	color: #0f735a;
}

.wg-problem-faq__question:focus-visible {
	outline: 3px solid rgba(11, 102, 143, 0.24);
	outline-offset: -3px;
}

.wg-problem-faq__icon {
	position: relative;
	display: block;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	overflow: hidden;
	color: transparent;
	background: #edf7f3;
	border: 1px solid #d4e8f0;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	transition: background-color 0.22s ease, border-color 0.22s ease;
}

.wg-problem-faq__icon::before,
.wg-problem-faq__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	background: #0f735a;
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease, background-color 0.22s ease;
}

.wg-problem-faq__icon::before {
	width: 12px;
	height: 2px;
}

.wg-problem-faq__icon::after {
	width: 2px;
	height: 12px;
}

.wg-problem-faq__item[open] .wg-problem-faq__question {
	color: #0f735a;
	background: #f6fafc;
}

.wg-problem-faq__item[open] .wg-problem-faq__icon {
	background: #0f735a;
	border-color: #0f735a;
}

.wg-problem-faq__item[open] .wg-problem-faq__icon::before,
.wg-problem-faq__item[open] .wg-problem-faq__icon::after {
	background: #ffffff;
}

.wg-problem-faq__item[open] .wg-problem-faq__icon::after {
	opacity: 0;
}

.wg-problem-faq__answer {
	padding: 10px 72px 25px 23px;
	animation: wg-faq-open 0.24s ease both;
}

.wg-problem-faq__answer p {
	margin: 0;
	color: #536475;
	font-size: 16px;
	line-height: 1.75;
}

@keyframes wg-faq-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 700px) {
	.wg-problem-faq {
		margin-top: 44px;
	}

	.wg-problem-faq__question {
		gap: 16px;
		padding: 18px;
		font-size: 16px;
	}

	.wg-problem-faq__icon {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
	}

	.wg-problem-faq__answer {
		padding: 9px 18px 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wg-problem-faq__question,
	.wg-problem-faq__icon,
	.wg-problem-faq__answer {
		animation: none;
		transition: none;
	}
}

/* Gerelateerde problemen: compacte tekstkaarten zonder afbeeldingen. */

body.single-probleem .wg-related-problems {
	margin-top: 64px;
	padding-top: 54px;
	border-top: 1px solid #e1e8ed;
}

body.single-probleem .wg-related-problems__track {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	overflow: visible;
}

body.single-probleem .wg-related-problems__card {
	min-width: 0;
	margin: 0;
}

body.single-probleem .wg-related-problems__link,
body.single-probleem .wg-related-problems__link:hover,
body.single-probleem .wg-related-problems__link:focus,
body.single-probleem .wg-related-problems__link:focus-visible {
	display: flex;
	height: 100%;
	min-height: 0;
	flex-direction: column;
	color: inherit;
	background: #ffffff !important;
	border: 1px solid #dce6eb;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 32, 51, 0.025);
	text-decoration: none;
}

body.single-probleem .wg-related-problems__link {
	transform: translateY(0);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

body.single-probleem .wg-related-problems__link:hover,
body.single-probleem .wg-related-problems__link:focus-visible {
	border-color: #b9d3de;
	box-shadow: 0 10px 26px rgba(15, 32, 51, 0.085);
	transform: translateY(-2px);
}

body.single-probleem .wg-related-problems__link:focus-visible {
	outline: 3px solid rgba(11, 102, 143, 0.2);
	outline-offset: 3px;
}

body.single-probleem .wg-related-problems__content {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	padding: 20px;
}

body.single-probleem .wg-related-problems__label {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-height: 25px;
	margin: 0 0 11px;
	padding: 5px 9px;
	color: #0f735a;
	background: #edf7f3;
	border: 1px solid #d7eaf1;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.15;
}

body.single-probleem .wg-related-problems__label--faultcode {
	color: #44576a;
	background: #f1f5f8;
	border-color: #dce5eb;
}

body.single-probleem .wg-related-problems__title {
	margin: 0;
	color: #102033;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.012em;
	transition: color 0.2s ease;
}

body.single-probleem .wg-related-problems__link:hover .wg-related-problems__title,
body.single-probleem .wg-related-problems__link:focus-visible .wg-related-problems__title {
	color: #0f735a;
}

body.single-probleem .wg-related-problems__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 8px 0 0;
	color: #667789;
	font-size: 14px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

body.single-probleem .wg-related-problems__read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	padding-top: 15px;
	color: #0f735a;
	font-size: 13px;
	font-weight: 800;
}

@media (max-width: 700px) {
	body.single-probleem .wg-related-problems {
		margin-top: 48px;
		padding-top: 42px;
	}

	body.single-probleem .wg-related-problems__track {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	body.single-probleem .wg-related-problems__content {
		padding: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-probleem .wg-related-problems__link,
	body.single-probleem .wg-related-problems__title {
		transition: none;
	}

	body.single-probleem .wg-related-problems__link:hover,
	body.single-probleem .wg-related-problems__link:focus-visible {
		transform: none;
	}
}

/* =========================================================
   Probleemoverzichten: /problemen/ en apparaatpagina's
   ========================================================= */

/* Laat het overzicht over de volledige browserbreedte lopen,
   ook wanneer GeneratePress de hoofdcontent begrenst. */
.wg-problem-page {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	background: #fff;
	color: #172033;
}

.wg-problem-page__container {
	width: min(calc(100% - 40px), var(--wg-container-width));
	margin-inline: auto;
}

.wg-problem-page__hero {
	width: 100%;
	padding: 64px 0 50px;
	background:
		linear-gradient(
			180deg,
			#f5f9fc 0%,
			#fff 100%
		);
}

.wg-problem-page__breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 20px;
	color: #667085;
	font-size: 14px;
}

.wg-problem-page__breadcrumbs a {
	color: #3b6fa1;
	text-decoration: none;
}

.wg-problem-page__breadcrumbs a:hover,
.wg-problem-page__breadcrumbs a:focus {
	text-decoration: underline;
}

.wg-problem-page__title {
	max-width: 800px;
	margin: 0;
	color: #102033;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	overflow-wrap: normal;
	word-break: normal;
}

.wg-problem-page__intro {
	max-width: 720px;
	margin: 20px 0 0;
	color: #526176;
	font-size: 18px;
	line-height: 1.7;
}

.wg-problem-overview,
.wg-problem-list {
	padding: 34px 0 80px;
}

.wg-problem-overview__grid,
.wg-problem-list__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.wg-problem-overview__card {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	min-height: 190px;
	padding: 28px;
	border: 1px solid #dfe7ef;
	border-radius: 14px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 8px 28px rgba(16, 32, 51, 0.05);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.wg-problem-overview__card:hover,
.wg-problem-overview__card:focus-visible {
	border-color: #b8ccdd;
	box-shadow: 0 14px 34px rgba(16, 32, 51, 0.09);
	transform: translateY(-2px);
}

.wg-problem-overview__card-content {
	min-width: 0;
}

.wg-problem-overview__card-title {
	margin: 0;
	color: #102033;
	font-size: 22px;
	line-height: 1.3;
}

.wg-problem-overview__card-text {
	max-width: 520px;
	margin: 12px 0 16px;
	color: #617085;
	line-height: 1.65;
}

.wg-problem-overview__count {
	color: #3b6fa1;
	font-size: 14px;
	font-weight: 600;
}

.wg-problem-overview__arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #eef5fa;
	color: #275f8d;
	font-size: 22px;
}

.wg-problem-list__toolbar {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}

.wg-problem-search {
	display: block;
	width: min(100%, 520px);
}

.wg-problem-search__input {
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	border: 1px solid #cfd9e3;
	border-radius: 9px;
	background: #fff;
	color: #172033;
	font-size: 16px;
	box-shadow: 0 5px 18px rgba(16, 32, 51, 0.04);
}

.wg-problem-search__input:focus {
	border-color: #3b6fa1;
	outline: 3px solid rgba(59, 111, 161, 0.14);
}

.wg-problem-list__result-count {
	margin: 0;
	color: #667085;
	font-size: 14px;
}

.wg-problem-card {
	overflow: hidden;
	border: 1px solid #dfe7ef;
	border-radius: 12px;
	background: #fff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.wg-problem-card:hover,
.wg-problem-card:focus-within {
	border-color: #b8ccdd;
	box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
	transform: translateY(-2px);
}

.wg-problem-card[hidden] {
	display: none;
}

.wg-problem-card__link {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

.wg-problem-card__image {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f5f7fa;
}

.wg-problem-card__image-file {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.wg-problem-card:hover .wg-problem-card__image-file,
.wg-problem-card:focus-within .wg-problem-card__image-file {
	transform: scale(1.025);
}

.wg-problem-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 25px;
}

.wg-problem-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 24px;
	margin-bottom: 11px;
}

.wg-problem-card__meta span {
	padding: 4px 8px;
	border-radius: 999px;
	background: #eef5fa;
	color: #376b96;
	font-size: 12px;
	font-weight: 600;
}

.wg-problem-card__title {
	margin: 0;
	color: #102033;
	font-size: 20px;
	line-height: 1.35;
}

.wg-problem-card__excerpt {
	margin: 12px 0 18px;
	color: #617085;
	line-height: 1.6;
}

.wg-problem-card__read-more {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	margin-top: auto;
	color: #2f6897;
	font-size: 14px;
	font-weight: 700;
}

.wg-problem-list__empty {
	padding: 48px 24px;
	border: 1px dashed #cbd6e1;
	border-radius: 12px;
	background: #f8fafc;
	text-align: center;
}

.wg-problem-list__empty h2 {
	margin: 0 0 8px;
	font-size: 21px;
}

.wg-problem-list__empty p {
	margin: 0;
	color: #667085;
}

@media (max-width: 760px) {
	.wg-problem-page__container {
		width: min(calc(100% - 28px), var(--wg-container-width));
	}

	.wg-problem-page__hero {
		padding: 42px 0 36px;
	}

	.wg-problem-page__title {
		font-size: 36px;
	}

	.wg-problem-page__intro {
		font-size: 16px;
	}

	.wg-problem-overview,
	.wg-problem-list {
		padding: 24px 0 56px;
	}

	.wg-problem-overview__grid,
	.wg-problem-list__grid {
		grid-template-columns: 1fr;
	}

	.wg-problem-overview__card {
		min-height: 0;
		padding: 22px;
	}

	.wg-problem-list__toolbar {
		display: block;
	}

	.wg-problem-search {
		width: 100%;
	}

	.wg-problem-list__result-count {
		margin-top: 12px;
	}

	.wg-problem-card__content {
		padding: 21px;
	}
}

/* Full width probleemoverzichten */

body.page-template-page-problemen #page,
body.page-template-page-probleem-apparaat #page {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.page-template-page-problemen #content,
body.page-template-page-probleem-apparaat #content,
body.page-template-page-problemen .site-content,
body.page-template-page-probleem-apparaat .site-content {
    width: 100%;
    max-width: none;
    padding: 0;
}
/* Automatische keuzehulp op wasmachine- en wasdrogerproblemen */
.wg-problem-choice-help {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	margin: 42px 0;
	padding: 26px 28px;
	border: 1px solid var(--wg-border, #dfe6ee);
	border-radius: 18px;
	background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
	box-shadow: 0 10px 30px rgba(16, 32, 51, .06);
}
.wg-problem-choice-help__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #eaf4fb;
	color: var(--wg-primary, #0b4f71);
}
.wg-problem-choice-help__icon svg {
	width: 27px;
	height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.wg-problem-choice-help__content h2 {
	margin: 0 0 6px;
	font-size: clamp(20px, 2vw, 25px);
}
.wg-problem-choice-help__content p {
	margin: 0;
	color: #526173;
}
.wg-problem-choice-help__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--wg-primary, #0b4f71);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.wg-problem-choice-help__button:hover,
.wg-problem-choice-help__button:focus-visible {
	color: #fff;
	transform: translateY(-1px);
}
@media (max-width: 760px) {
	.wg-problem-choice-help {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 15px;
		padding: 22px;
	}
	.wg-problem-choice-help__button {
		grid-column: 1 / -1;
		width: 100%;
	}
}


/* ================================================================
   Probleempagina 2026 — compacte diagnose-layout
   Alleen single-probleem; overzichten blijven onaangetast.
   ================================================================ */
body.single-probleem .wg-problem__container {
	width: min(calc(100% - 48px),1180px);
}

body.single-probleem .wg-problem__hero {
	padding: 42px 0 54px;
	background: linear-gradient(135deg,#eef8f3 0%,#fff 62%,#f7fafc 100%);
}

body.single-probleem .wg-breadcrumbs {
	margin-bottom: 34px;
	font-size: 13px;
}

body.single-probleem .wg-problem__hero-grid {
	grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr);
	gap: 54px;
}

body.single-probleem .wg-problem__eyebrow {
	display: inline-flex;
	margin-bottom: 14px;
	color: #0f735a;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.single-probleem .wg-problem__title {
	max-width: 780px;
	font-size: clamp(38px,4.5vw,56px);
}

body.single-probleem .wg-problem__intro {
	max-width: 720px;
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.65;
}

body.single-probleem .wg-problem__hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
}

body.single-probleem .wg-problem__hero .wg-button {
	margin: 0;
}

body.single-probleem .wg-problem__trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #526173;
	font-size: 14px;
	font-weight: 650;
}

body.single-probleem .wg-problem__trust span {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 50%;
	background: #e4f3ec;
	color: #0f735a;
	font-size: 12px;
}

body.single-probleem .wg-problem__visual {
	min-height: 250px;
}

body.single-probleem .wg-problem__visual-image {
	max-width: 340px;
	max-height: 280px;
	object-fit: contain;
}

body.single-probleem .wg-problem__content {
	padding: 58px 0 96px;
}

body.single-probleem .wg-problem__layout {
	display: grid;
	grid-template-columns: minmax(0,820px) 260px;
	align-items: start;
	gap: 72px;
}

body.single-probleem .wg-problem__main {
	min-width: 0;
}

body.single-probleem .wg-problem__aside {
	position: sticky;
	top: 28px;
	display: grid;
	gap: 18px;
}

body.single-probleem .wg-problem__aside-card {
	padding: 20px;
	border: 1px solid #dce7ec;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 25px rgba(16,32,51,.045);
}

body.single-probleem .wg-problem__aside-card>strong {
	display: block;
	margin-bottom: 10px;
	color: #102033;
	font-size: 15px;
}

body.single-probleem .wg-problem__aside-card nav {
	display: grid;
}

body.single-probleem .wg-problem__aside-card a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #edf1f4;
	color: #536577;
	font-size: 14px;
	text-decoration: none;
}

body.single-probleem .wg-problem__aside-card a:hover {
	color: #0f735a;
}

body.single-probleem .wg-problem__aside-note {
	display: flex;
	gap: 12px;
	padding: 18px;
	border-radius: 14px;
	background: #f1f7f4;
	color: #526173;
	font-size: 13px;
	line-height: 1.6;
}

body.single-probleem .wg-problem__aside-note>span {
	display: grid;
	flex: 0 0 25px;
	width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 50%;
	background: #0f735a;
	color: #fff;
	font-weight: 800;
}

body.single-probleem .wg-problem__aside-note p {
	margin: 0;
}

body.single-probleem .wg-problem__mobile-nav {
	display: none;
}

body.single-probleem .wg-problem-answer {
	display: grid;
	grid-template-columns: 48px minmax(0,1fr);
	gap: 18px;
	padding: 28px 30px;
	border: 1px solid #cce2d7;
	border-left: 4px solid #0f735a;
	border-radius: 16px;
	background: linear-gradient(135deg,#f1f8f4,#fff);
	box-shadow: 0 10px 28px rgba(16,32,51,.045);
	scroll-margin-top: 24px;
}

body.single-probleem .wg-problem-answer__icon {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: 13px;
	background: #0f735a;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}

body.single-probleem .wg-problem-answer__label {
	display: block;
	margin-bottom: 4px;
	color: #0f735a;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .07em;
	text-transform: uppercase;
}

body.single-probleem .wg-problem-answer h2 {
	margin: 0 0 10px;
	font-size: 28px;
}

body.single-probleem .wg-problem-answer__text>*:first-child {
	margin-top: 0;
}

body.single-probleem .wg-problem-answer__text>*:last-child {
	margin-bottom: 0;
}

body.single-probleem .wg-problem-answer__text h2:first-child {
	display: none;
}

body.single-probleem .wg-problem-answer__text p,
body.single-probleem .wg-problem-answer__text li {
	color: #405569;
	font-size: 17px;
	line-height: 1.7;
}

body.single-probleem .wg-problem-block {
	margin-top: 62px;
	scroll-margin-top: 24px;
}

body.single-probleem .wg-problem-block__heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 24px;
}

body.single-probleem .wg-problem-block__heading>span {
	display: grid;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	background: #eaf5fa;
	color: #0f735a;
	font-size: 12px;
	font-weight: 850;
}

body.single-probleem .wg-problem-block__heading h2 {
	margin: 0 0 5px;
	color: #102033;
	font-size: 30px;
	line-height: 1.2;
}

body.single-probleem .wg-problem-block__heading p {
	margin: 0;
	color: #687889;
	font-size: 15px;
	line-height: 1.55;
}

body.single-probleem .wg-problem-causes__list {
	display: grid;
	gap: 12px;
}

body.single-probleem .wg-problem-causes__item {
	display: grid;
	grid-template-columns: 38px minmax(0,1fr);
	gap: 16px;
	padding: 21px 22px;
	border: 1px solid #dce6eb;
	border-radius: 13px;
	background: #fff;
}

body.single-probleem .wg-problem-causes__number {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	background: #f0f7fa;
	color: #0f735a;
	font-size: 14px;
	font-weight: 850;
}

body.single-probleem .wg-problem-causes__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

body.single-probleem .wg-problem-causes__top h3 {
	margin: 2px 0 4px;
	color: #102033;
	font-size: 18px;
}

body.single-probleem .wg-problem-causes__top span {
	padding: 4px 8px;
	border-radius: 999px;
	background: #e9f6ee;
	color: #247243;
	font-size: 11px;
	font-weight: 800;
}

body.single-probleem .wg-problem-causes__item p {
	margin: 6px 0 0;
	color: #5c6d7e;
	font-size: 15px;
	line-height: 1.65;
}

body.single-probleem .wg-problem-supplies {
	margin: 0 0 18px;
	padding: 18px 20px;
	border: 1px solid #d7e6ed;
	border-radius: 13px;
	background: #f5fafc;
}

body.single-probleem .wg-problem-supplies>strong {
	display: block;
	margin-bottom: 12px;
	color: #102033;
	font-size: 15px;
}

body.single-probleem .wg-problem-supplies ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-probleem .wg-problem-supplies li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	border: 1px solid #dce7ec;
	border-radius: 9px;
	background: #fff;
	color: #30465a;
	font-size: 13px;
	font-weight: 650;
}

body.single-probleem .wg-problem-supplies li span {
	color: #0f735a;
}

body.single-probleem .wg-problem-steps {
	margin-top: 62px;
}

body.single-probleem .wg-problem-steps__list {
	gap: 12px;
	margin-top: 0;
}

body.single-probleem .wg-problem-steps__item {
	position: relative;
	grid-template-columns: 42px minmax(0,1fr);
	gap: 16px;
	padding: 22px 24px;
	background: #fff;
	border-color: #dce6eb;
}

body.single-probleem .wg-problem-steps__number {
	width: 38px;
	height: 38px;
	font-size: 14px;
}

body.single-probleem .wg-problem-steps__content h3 {
	font-size: 18px;
}

body.single-probleem .wg-problem-steps__content p {
	color: #5b6d7f;
	font-size: 15px;
	line-height: 1.65;
}

body.single-probleem .wg-problem-safety {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: 12px;
	background: #fff8e8;
	color: #65532d;
}

body.single-probleem .wg-problem-safety>span {
	display: grid;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 50%;
	background: #f4c65f;
	color: #44340f;
	font-weight: 900;
}

body.single-probleem .wg-problem-safety p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
}

body.single-probleem .wg-problem-parts {
	margin-top: 62px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.single-probleem .wg-problem-parts__grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 12px;
}

body.single-probleem .wg-problem-parts__item {
	display: grid;
	grid-template-columns: 42px minmax(0,1fr);
	gap: 14px;
	padding: 20px;
	border: 1px solid #dce6eb;
	border-radius: 13px;
	background: #fff;
}

body.single-probleem .wg-problem-parts__part-icon {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 11px;
	background: #eaf5fa;
	color: #0f735a;
	font-size: 22px;
	font-weight: 800;
}

body.single-probleem .wg-problem-parts__content h3 {
	margin: 1px 0 7px;
	color: #102033;
	font-size: 18px;
}

body.single-probleem .wg-problem-parts__content p {
	margin: 0 0 12px;
	color: #637385;
	font-size: 14px;
	line-height: 1.55;
}

body.single-probleem .wg-problem-parts__link {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	color: #0f735a;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

body.single-probleem .wg-problem-choice-help {
	display: grid;
	grid-template-columns: minmax(0,1fr) 170px;
	gap: 30px;
	margin: 64px 0 0;
	padding: 34px 36px;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	background: linear-gradient(135deg,#0b5578,#0a6c91);
	box-shadow: 0 16px 38px rgba(11,79,113,.17);
	color: #fff;
	scroll-margin-top: 24px;
}

body.single-probleem .wg-problem-choice-help__label {
	display: block;
	margin-bottom: 8px;
	color: #cdebf6;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.single-probleem .wg-problem-choice-help h2 {
	margin: 0 0 10px;
	color: #fff;
	font-size: 28px;
	line-height: 1.2;
}

body.single-probleem .wg-problem-choice-help p {
	max-width: 560px;
	margin: 0 0 20px;
	color: #e4f3f8;
	font-size: 15px;
	line-height: 1.65;
}

body.single-probleem .wg-problem-choice-help__button {
	display: inline-flex;
	width: auto;
	min-height: 48px;
	padding: 0 19px;
	background: #fff;
	color: #0b5578;
}

body.single-probleem .wg-problem-choice-help__button:hover,
body.single-probleem .wg-problem-choice-help__button:focus-visible {
	color: #0b5578;
	background: #f4fbfd;
}

body.single-probleem .wg-problem-choice-help__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	color: #fff;
}

body.single-probleem .wg-problem-choice-help__visual span {
	display: grid;
	width: 66px;
	height: 66px;
	place-items: center;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	font-size: 30px;
	font-weight: 850;
}

body.single-probleem .wg-problem-choice-help__visual strong {
	font-size: 14px;
	line-height: 1.3;
}

body.single-probleem .wg-problem-faq {
	margin-top: 62px;
}

body.single-probleem .wg-problem-faq__list {
	display: grid;
	gap: 10px;
}

body.single-probleem .wg-problem-faq__item {
	border: 1px solid #dce6eb;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

body.single-probleem .wg-problem-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px;
	color: #102033;
	font-weight: 750;
	cursor: pointer;
	list-style: none;
}

body.single-probleem .wg-problem-faq__item summary::-webkit-details-marker {
	display: none;
}

body.single-probleem .wg-problem-faq__item summary span:last-child {
	font-size: 22px;
	color: #0f735a;
}

body.single-probleem .wg-problem-faq__item>div {
	padding: 0 20px 18px;
}

body.single-probleem .wg-problem-faq__item p {
	margin: 0;
	color: #5d6e7f;
	font-size: 15px;
	line-height: 1.65;
}


@media (max-width:980px) {
	body.single-probleem .wg-problem__hero-grid {
		grid-template-columns: minmax(0,1fr) 240px;
		gap: 28px;
	}

	body.single-probleem .wg-problem__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	body.single-probleem .wg-problem__aside {
		display: none;
	}

	body.single-probleem .wg-problem__mobile-nav {
		display: block;
		margin-bottom: 18px;
		padding: 17px;
		border: 1px solid #dce7ec;
		border-radius: 13px;
		background: #fff;
	}

	body.single-probleem .wg-problem__mobile-nav strong {
		display: block;
		margin-bottom: 10px;
		font-size: 14px;
	}

	body.single-probleem .wg-problem__mobile-nav div {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 3px;
	}

	body.single-probleem .wg-problem__mobile-nav a {
		flex: 0 0 auto;
		padding: 7px 10px;
		border-radius: 8px;
		background: #eef6fa;
		color: #0f735a;
		font-size: 12px;
		font-weight: 750;
		text-decoration: none;
	}
}

@media (max-width:700px) {
	body.single-probleem .wg-problem__container {
		width: min(calc(100% - 28px),1180px);
	}

	body.single-probleem .wg-problem__hero {
		padding: 26px 0 38px;
	}

	body.single-probleem .wg-breadcrumbs {
		margin-bottom: 24px;
	}

	body.single-probleem .wg-problem__hero-grid {
		display: block;
	}

	body.single-probleem .wg-problem__title {
		font-size: 37px;
	}

	body.single-probleem .wg-problem__intro {
		font-size: 16px;
	}

	body.single-probleem .wg-problem__visual {
		display: none;
	}

	body.single-probleem .wg-problem__hero-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	body.single-probleem .wg-problem__content {
		padding: 30px 0 68px;
	}

	body.single-probleem .wg-problem-answer {
		grid-template-columns: 1fr;
		padding: 22px 20px;
	}

	body.single-probleem .wg-problem-answer__icon {
		width: 38px;
		height: 38px;
	}

	body.single-probleem .wg-problem-answer h2 {
		font-size: 25px;
	}

	body.single-probleem .wg-problem-block {
		margin-top: 48px;
	}

	body.single-probleem .wg-problem-block__heading h2 {
		font-size: 26px;
	}

	body.single-probleem .wg-problem-causes__item {
		grid-template-columns: 34px minmax(0,1fr);
		padding: 18px 16px;
	}

	body.single-probleem .wg-problem-parts__grid,
	body.single-probleem .wg-related-problems__track {
		grid-template-columns: 1fr;
	}

	body.single-probleem .wg-problem-choice-help {
		grid-template-columns: 1fr;
		padding: 27px 22px;
	}

	body.single-probleem .wg-problem-choice-help__visual {
		display: none;
	}

	body.single-probleem .wg-problem-choice-help__button {
		width: 100%;
	}
}

/* Verfijnde onderdeelkaarten op probleempagina's */
body.single-probleem .wg-problem-parts__grid {
	gap: 16px;
}

body.single-probleem .wg-problem-parts__item {
	position: relative;
	display: flex;
	min-height: 100%;
	gap: 17px;
	padding: 22px;
	overflow: hidden;
	border: 1px solid #d8e5eb;
	border-radius: 16px;
	background: linear-gradient(145deg, #ffffff 0%, #f9fcfd 100%);
	box-shadow: 0 8px 24px rgba(16, 32, 51, 0.045);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.single-probleem .wg-problem-parts__item::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	content: "";
	background: #0f735a;
}

body.single-probleem .wg-problem-parts__item:hover {
	transform: translateY(-2px);
	border-color: #bfd8e3;
	box-shadow: 0 14px 32px rgba(16, 32, 51, 0.085);
}

body.single-probleem .wg-problem-parts__part-icon {
	display: grid;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid #cfe4ed;
	border-radius: 14px;
	background: #eaf6fa;
	color: #0f735a;
}

body.single-probleem .wg-problem-parts__part-icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.single-probleem .wg-problem-parts__content {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
}

body.single-probleem .wg-problem-parts__content h3 {
	margin: 1px 0 8px;
	color: #102033;
	font-size: 19px;
	line-height: 1.3;
}

body.single-probleem .wg-problem-parts__content p {
	margin: 0 0 17px;
	color: #5d6e7f;
	font-size: 14px;
	line-height: 1.65;
}

body.single-probleem .wg-problem-parts__link {
	display: inline-flex;
	width: fit-content;
	min-height: 40px;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding: 0 14px;
	border: 1px solid #c8dfe8;
	border-radius: 10px;
	background: #ffffff;
	color: #0f735a;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body.single-probleem .wg-problem-parts__link span {
	font-size: 17px;
	line-height: 1;
	transition: transform .2s ease;
}

body.single-probleem .wg-problem-parts__link:hover,
body.single-probleem .wg-problem-parts__link:focus-visible {
	transform: translateY(-1px);
	border-color: #0f735a;
	background: #0f735a;
	color: #ffffff;
}

body.single-probleem .wg-problem-parts__link:hover span,
body.single-probleem .wg-problem-parts__link:focus-visible span {
	transform: translateX(2px);
}

@media (max-width: 700px) {
	body.single-probleem .wg-problem-parts__item {
		gap: 14px;
		padding: 18px;
	}

	body.single-probleem .wg-problem-parts__part-icon {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	body.single-probleem .wg-problem-parts__content h3 {
		font-size: 17px;
	}

	body.single-probleem .wg-problem-parts__link {
		width: 100%;
		justify-content: center;
	}
}


/* Ruimere onderdelensectie en keuzehulp zonder bovenlabel */
body.single-probleem .wg-problem-parts {
	padding: 30px;
	border: 1px solid #e0e9ed;
	border-radius: 18px;
	background: #f7fafb;
	box-shadow: 0 12px 34px rgba(16, 32, 51, 0.05);
}

body.single-probleem .wg-problem-parts .wg-problem-block__heading {
	margin-bottom: 24px;
}

body.single-probleem .wg-problem-choice-help__label {
	display: none;
}

@media (max-width: 700px) {
	body.single-probleem .wg-problem-parts {
		padding: 20px;
		border-radius: 15px;
	}

	body.single-probleem .wg-problem-parts .wg-problem-block__heading {
		margin-bottom: 19px;
	}
}

/* Verfijning diagnosepagina – 2026-07-26 */
.wg-problem__hero{padding-block:clamp(42px,5vw,72px)}
.wg-problem__hero-grid{min-height:0}
.wg-problem__hero-actions .wg-button{min-height:46px}
.wg-problem-answer__text > h1:first-child,
.wg-problem-answer__text > h2:first-child{display:none}
.wg-problem-answer__text > :last-child{margin-bottom:0}
.wg-problem-causes__item:first-child{border-color:#9fd3e8;background:linear-gradient(135deg,#f6fcff,#fff)}
.wg-problem-causes__top span{white-space:nowrap}
.wg-problem-safety{align-items:flex-start;background:#fffaf0;border-color:#efd493}
.wg-problem-safety > span{background:#fff0bd;color:#8a5a00}
.wg-problem-safety strong{display:block;margin:0 0 4px;color:#5f4300}
.wg-problem-safety p{margin:0}
.wg-problem__aside-meta{display:grid;gap:0;border:1px solid var(--wg-border,#dfe6ee);border-radius:14px;background:#fff;overflow:hidden}
.wg-problem__aside-meta>div{display:flex;justify-content:space-between;gap:16px;padding:13px 15px}
.wg-problem__aside-meta>div+div{border-top:1px solid var(--wg-border,#dfe6ee)}
.wg-problem__aside-meta span{font-size:12px;color:#64748b}
.wg-problem__aside-meta strong{font-size:12px;text-align:right;color:#102033}
.wg-problem-choice{position:relative;overflow:hidden;background:linear-gradient(135deg,#eef9fd 0%,#fff 72%);border:1px solid #b9dce9;box-shadow:0 16px 40px rgba(15,70,95,.09)}
.wg-problem-choice::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;background:rgba(15,113,151,.07);pointer-events:none}
.wg-problem-choice h2,.wg-problem-choice p,.wg-problem-choice a{position:relative;z-index:1}
@media (max-width:768px) {
	.wg-problem__hero {
		padding-block: 34px;
	}

	.wg-problem__aside-meta {
		display: none;
	}
}

/* Altijd een duidelijke teruglink naar het volledige apparaatcluster. */
body.single-probleem .wg-related-problems__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: #0f735a;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

body.single-probleem .wg-related-problems__all:hover,
body.single-probleem .wg-related-problems__all:focus-visible {
	color: #0a5745;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Lichtgewicht geanimeerde wasmachine in de hero van individuele wasmachineproblemen. */
@media (min-width: 981px) {
	body.single-probleem .wg-problem__hero-grid--washer {
		grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
		gap: 58px;
	}

	body.single-probleem .wg-problem__visual--washer {
		position: relative;
		display: flex;
		min-height: 340px;
		isolation: isolate;
	}

	body.single-probleem .wg-washer-visual {
		position: relative;
		width: min(100%, 470px);
		aspect-ratio: 14 / 11;
	}

	body.single-probleem .wg-washer-visual__svg {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	body.single-probleem .wg-washer-visual__halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: wg-washer-halo 5.8s ease-in-out infinite;
	}

	body.single-probleem .wg-washer-visual__orbit {
		transform-box: view-box;
		transform-origin: 280px 220px;
	}

	body.single-probleem .wg-washer-visual__orbit--outer {
		animation: wg-washer-orbit 30s linear infinite;
	}

	body.single-probleem .wg-washer-visual__orbit--inner {
		animation: wg-washer-orbit-reverse 24s linear infinite;
	}

	body.single-probleem .wg-washer-visual__drum {
		transform-box: view-box;
		transform-origin: 280px 254px;
		animation: wg-washer-drum 20s linear infinite;
	}

	body.single-probleem .wg-washer-visual__water {
		animation: wg-washer-water 5.6s ease-in-out infinite alternate;
	}

	body.single-probleem .wg-washer-visual__badge {
		transform-box: fill-box;
		transform-origin: center;
		animation: wg-washer-badge 4.6s ease-in-out infinite;
	}
}

@media (max-width: 980px) {
	body.single-probleem .wg-problem__hero-grid--washer {
		grid-template-columns: 1fr;
	}

	body.single-probleem .wg-problem__visual--washer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-probleem .wg-washer-visual__halo,
	body.single-probleem .wg-washer-visual__orbit,
	body.single-probleem .wg-washer-visual__drum,
	body.single-probleem .wg-washer-visual__water,
	body.single-probleem .wg-washer-visual__badge {
		animation: none !important;
	}
}

@keyframes wg-washer-halo {
	0%, 100% { transform: scale(.985); opacity: .82; }
	50% { transform: scale(1.025); opacity: 1; }
}

@keyframes wg-washer-orbit {
	to { transform: rotate(360deg); }
}

@keyframes wg-washer-orbit-reverse {
	to { transform: rotate(-360deg); }
}

@keyframes wg-washer-drum {
	to { transform: rotate(360deg); }
}

@keyframes wg-washer-water {
	0% { transform: translate3d(-5px, 1px, 0) rotate(-.8deg); }
	100% { transform: translate3d(6px, -2px, 0) rotate(.8deg); }
}

@keyframes wg-washer-badge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* Hero-kenmerken en foutcodeweergave – 2026-08-02. */
body.single-probleem .wg-problem__hero-grid {
	grid-template-areas:
		"copy visual"
		"features visual";
	grid-template-rows: max-content max-content;
	align-content: center;
	row-gap: 24px;
}

body.single-probleem .wg-problem__hero-content {
	grid-area: copy;
	align-self: auto;
}

body.single-probleem .wg-problem__hero-features {
	grid-area: features;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	align-self: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-probleem .wg-problem__hero-features li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: #284257;
	font-size: 13px;
	line-height: 1.35;
}

body.single-probleem .wg-problem__hero-features li > span {
	display: grid;
	flex: 0 0 24px;
	place-items: center;
	width: 24px;
	height: 24px;
	color: #0b6f97;
	background: #e4f4fa;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
}

body.single-probleem .wg-problem__hero-features strong {
	font-weight: 750;
}

body.single-probleem .wg-problem__visual {
	grid-area: visual;
	grid-row: 1 / span 2;
}

/* De mobiele foutcodekaart wordt uitsluitend met CSS opgebouwd.
 * Daardoor verschijnt er op desktop nooit losse tekst onder de illustratie. */
body.single-probleem .wg-problem__visual--faultcode::before,
body.single-probleem .wg-problem__visual--faultcode::after {
	display: none;
}

body.single-probleem .wg-washer-visual__fault-code {
	filter: drop-shadow(0 0 3px rgba(126, 226, 255, .65));
	animation: wg-washer-code-pulse 2.8s ease-in-out infinite;
}

@media (max-width: 980px) {
	body.single-probleem .wg-problem__hero-grid {
		grid-template-areas:
			"copy"
			"features";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		row-gap: 18px;
	}

	body.single-probleem .wg-problem__hero-grid--washer {
		display: grid;
	}

	body.single-probleem .wg-problem__hero-grid--washer .wg-problem__hero-content {
		width: 100%;
	}

	body.single-probleem .wg-problem__hero-features {
		display: grid;
		gap: 10px;
		margin-top: 0;
	}

	body.single-probleem .wg-problem__hero-features li {
		font-size: 12.5px;
	}

	/* Gewone wasmachineproblemen: op mobiel geen decoratieve illustratie. */
	body.single-probleem .wg-problem__hero-grid--washer:not(.wg-problem__hero-grid--faultcode) .wg-problem__visual--washer {
		display: none;
	}

	/* Foutcodepagina: compacte storingskaart tussen titel en kenmerken. */
	body.single-probleem .wg-problem__hero-grid--washer.wg-problem__hero-grid--faultcode {
		grid-template-areas:
			"copy"
			"visual"
			"features";
		row-gap: 16px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__visual--washer {
		display: grid;
		grid-area: visual;
		grid-row: auto;
		grid-template-columns: 102px minmax(0, 1fr);
		grid-template-areas:
			"machine label"
			"machine code";
		grid-template-rows: 1fr 1fr;
		align-items: center;
		width: 100%;
		max-width: none;
		min-height: 112px;
		margin: 0;
		padding: 8px 16px 8px 4px;
		overflow: hidden;
		background: linear-gradient(135deg, #f2fafe 0%, #ffffff 72%);
		border: 1px solid #cfe4ed;
		border-radius: 17px;
		box-shadow: 0 10px 24px rgba(20, 74, 101, .08);
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual {
		grid-area: machine;
		display: block;
		width: 102px;
		height: 102px;
		aspect-ratio: 1;
		overflow: hidden;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual__svg {
		display: block;
		width: 102px;
		height: 102px;
		transform: scale(1.42);
		transform-origin: 48% 55%;
		overflow: hidden;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual__orbit,
	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual__badge {
		display: none;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual__fault-code {
		display: none;
	}

	body.single-probleem .wg-problem__visual--faultcode::before,
	body.single-probleem .wg-problem__visual--faultcode::after {
		display: block;
		min-width: 0;
		margin-left: 12px;
	}

	body.single-probleem .wg-problem__visual--faultcode::before {
		grid-area: label;
		align-self: end;
		content: "Foutcode";
		color: #567284;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: .08em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	body.single-probleem .wg-problem__visual--faultcode::after {
		grid-area: code;
		align-self: start;
		content: attr(data-fault-code);
		color: #123f5a;
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
		font-size: clamp(28px, 9vw, 38px);
		font-weight: 850;
		letter-spacing: .035em;
		line-height: 1.05;
		text-shadow: 0 0 12px rgba(74, 174, 216, .2);
		animation: wg-washer-code-pulse 2.8s ease-in-out infinite;
	}
}

@media (max-width: 360px) {
	body.single-probleem .wg-problem__hero-features li {
		gap: 7px;
		font-size: 12px;
	}

	body.single-probleem .wg-problem__hero-features li > span {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__visual--washer {
		grid-template-columns: 88px minmax(0, 1fr);
		min-height: 100px;
		padding-right: 12px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual,
	body.single-probleem .wg-problem__hero-grid--faultcode .wg-washer-visual__svg {
		width: 88px;
		height: 88px;
	}

	body.single-probleem .wg-problem__visual--faultcode::before,
	body.single-probleem .wg-problem__visual--faultcode::after {
		margin-left: 8px;
	}

	body.single-probleem .wg-problem__visual--faultcode::after {
		font-size: 27px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-probleem .wg-washer-visual__fault-code,
	body.single-probleem .wg-problem__visual--faultcode::after {
		animation: none !important;
	}
}

@keyframes wg-washer-code-pulse {
	0%, 38%, 62%, 100% { opacity: 1; }
	48%, 55% { opacity: .38; }
}

/* =========================================================
   Wasdrogergids Design System 2.0 — losse probleempagina
   ========================================================= */
body.single-probleem .wg-problem__hero {
    background: linear-gradient(135deg, #edf8f3 0%, #fff 62%, #f5f9f7 100%);
}

body.single-probleem .wg-problem-page .wg-problem__eyebrow,
body.single-probleem .wg-problem-page .wg-problem-section__eyebrow,
body.single-probleem .wg-problem-page a:not(.wg-button) {
    color: #0f735a;
}

body.single-probleem .wg-problem__trust span,
body.single-probleem .wg-problem-answer__icon,
body.single-probleem .wg-problem-step__number {
    background: #e4f3ec;
    color: #0f735a;
}

body.single-probleem .wg-problem-answer {
    border-color: #cce2d7;
    border-left-color: #0f735a;
    background: linear-gradient(135deg, #f1f8f4, #fff);
}

body.single-probleem .wg-problem__aside-card,
body.single-probleem .wg-problem-card,
body.single-probleem .wg-related-problems__card {
    border-color: #d9e7e0;
    box-shadow: 0 10px 28px rgba(13, 48, 38, .05);
}


/* =========================================================
   Lichtgewicht foutcodehero voor wasdrogers
   ========================================================= */
.wdg-fault-visual{display:flex;min-height:360px;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.wdg-fault-visual__dryer{position:relative;width:min(310px,90%);aspect-ratio:.78;padding:28px 24px 22px;background:linear-gradient(145deg,#fff,#edf4f0);border:1px solid #cdded5;border-radius:26px;box-shadow:0 24px 60px rgba(18,51,38,.13)}
.wdg-fault-visual__panel{display:grid;grid-template-columns:12px 12px 1fr;align-items:center;gap:10px;height:54px;padding:0 14px;background:#f7faf8;border:1px solid #d5e3dc;border-radius:12px}
.wdg-fault-visual__panel>span{width:10px;height:10px;background:#b9cac1;border-radius:50%}
.wdg-fault-visual__panel strong{justify-self:end;min-width:92px;padding:8px 12px;color:#d9ffd9;background:#173d32;border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(20px,3vw,31px);line-height:1;text-align:center;letter-spacing:.08em;text-shadow:0 0 10px rgba(160,255,184,.48);animation:wdgFaultPulse 2.6s ease-in-out infinite}
.wdg-fault-visual__door{display:grid;place-items:center;width:78%;aspect-ratio:1;margin:30px auto 0;background:#dbe7e1;border:8px solid #bdcec5;border-radius:50%;box-shadow:inset 0 0 0 5px #f7faf8}
.wdg-fault-visual__door i{display:block;width:78%;height:78%;background:radial-gradient(circle at 42% 34%,#527267,#19382f 72%);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.wdg-fault-visual__feet{position:absolute;right:24px;bottom:-7px;left:24px;display:flex;justify-content:space-between}.wdg-fault-visual__feet span{width:42px;height:9px;background:#52675e;border-radius:0 0 6px 6px}
.wdg-fault-visual__brand{color:#4f695c;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
@keyframes wdgFaultPulse{0%,100%{opacity:1}50%{opacity:.68}}
@media (prefers-reduced-motion:reduce){.wdg-fault-visual__panel strong{animation:none}}
.wdg-fault-info,.wdg-fault-reset,.wdg-fault-models{padding:28px;background:#f8fbf9;border:1px solid #dce9e2;border-radius:18px}.wdg-fault-info>p,.wdg-fault-reset>p{margin:18px 0 0;color:#425b4f;font-size:17px;line-height:1.75}.wdg-fault-models ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:20px 0 0;padding:0;list-style:none}.wdg-fault-models li{padding:12px 14px;background:#fff;border:1px solid #dce9e2;border-radius:10px;color:#234638;font-weight:700}.wdg-fault-backlink{margin:32px 0}.wdg-fault-backlink a{display:inline-flex;gap:8px;color:#0f735a;font-weight:800;text-decoration:none}.wdg-fault-backlink a:hover{text-decoration:underline}
@media(max-width:700px){.wdg-fault-visual{min-height:280px}.wdg-fault-visual__dryer{width:230px;padding:20px 18px 16px;border-radius:21px}.wdg-fault-visual__panel{height:44px}.wdg-fault-visual__panel strong{min-width:78px;font-size:22px}.wdg-fault-visual__door{margin-top:22px}.wdg-fault-models ul{grid-template-columns:1fr}}

/* v41: foutcodehero boven uitlijnen + compact mobiel display */
.wg-problem__hero-grid--faultcode {
	position: relative;
	align-items: start;
}

.wg-problem__hero-grid--faultcode .wg-problem__hero-content {
	align-self: start;
	padding-top: clamp(36px, 5vw, 76px);
}

.wg-problem__hero-grid--faultcode .wg-problem__hero-features {
	align-self: end;
}

@media (max-width: 700px) {
	.wg-problem__hero-grid--faultcode {
		position: relative;
		display: block;
		padding-bottom: 58px;
	}

	.wg-problem__hero-grid--faultcode .wg-problem__hero-content {
		padding-top: 0;
	}

	.wg-problem__hero-grid--faultcode .wdg-fault-visual {
		position: absolute;
		right: 0;
		bottom: 4px;
		z-index: 2;
		display: block;
		width: auto;
		min-height: 0;
		margin: 0;
	}

	.wg-problem__hero-grid--faultcode .wdg-fault-visual__dryer {
		position: static;
		display: block;
		width: auto;
		min-width: 82px;
		aspect-ratio: auto;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.wg-problem__hero-grid--faultcode .wdg-fault-visual__panel {
		display: block;
		height: auto;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	.wg-problem__hero-grid--faultcode .wdg-fault-visual__panel > span,
	.wg-problem__hero-grid--faultcode .wdg-fault-visual__door,
	.wg-problem__hero-grid--faultcode .wdg-fault-visual__feet,
	.wg-problem__hero-grid--faultcode .wdg-fault-visual__brand {
		display: none;
	}

	.wg-problem__hero-grid--faultcode .wdg-fault-visual__panel strong {
		display: block;
		min-width: 82px;
		padding: 9px 13px;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 8px;
		box-shadow: 0 8px 20px rgba(18, 51, 38, .18);
		font-size: 23px;
		line-height: 1;
	}
}


/* v42: compacte foutcodehero en strikt lokale kleurwerking */
body.single-probleem .wg-problem__hero-grid--faultcode {
	grid-template-areas:
		"copy visual"
		"features visual";
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
	grid-template-rows: auto auto;
	align-content: start;
	align-items: start;
	column-gap: clamp(42px, 6vw, 88px);
	row-gap: 28px;
}

body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-content {
	grid-area: copy;
	align-self: start;
	padding-top: clamp(18px, 2.4vw, 38px);
}

body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__title {
	max-width: 820px;
	margin-top: 0;
}

body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__intro {
	max-width: 720px;
	margin-top: 18px;
}

body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-features {
	grid-area: features;
	align-self: start;
	justify-content: flex-start;
	margin: 0;
}

body.single-probleem .wg-problem__hero-grid--faultcode .wdg-fault-visual {
	grid-area: visual;
	grid-row: 1 / span 2;
	align-self: start;
	min-height: 0;
}

/* De globale header en footer behouden altijd hun eigen designsysteem. */
body.single-probleem .site-header a,
body.single-probleem .site-header a:visited,
body.single-probleem .site-footer a,
body.single-probleem .site-footer a:visited {
	color: inherit;
}

@media (max-width: 980px) {
	body.single-probleem .wg-problem__hero-grid--faultcode {
		display: grid;
		grid-template-areas:
			"copy"
			"features";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		row-gap: 22px;
		padding-bottom: 68px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-content {
		padding-top: 0;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-features {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 18px;
	}
}

@media (max-width: 700px) {
	body.single-probleem .wg-problem__hero {
		padding-top: 28px;
		padding-bottom: 36px;
	}

	body.single-probleem .wg-breadcrumbs {
		margin-bottom: 24px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode {
		row-gap: 18px;
		padding-bottom: 62px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__title {
		font-size: clamp(34px, 10vw, 43px);
		line-height: 1.08;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__intro {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.6;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-features {
		display: grid;
		gap: 9px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__hero-features li {
		font-size: 12.5px;
	}

	body.single-probleem .wg-problem__hero-grid--faultcode .wdg-fault-visual {
		right: 0;
		bottom: 0;
	}
}