/* Methode: Illustration (34 %) mit schräger Plakette, daneben Text (.methoden / .facticon in Oxygen). */

.nb-method .nb-inner {
	max-width: none;
}

.nb-method__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	padding-block: 50px;
}

.nb-method--image-right .nb-method__media {
	order: 2;
}

.nb-method__media {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 34%;
	max-width: 400px;
}

.nb-method__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Plakette: grauer Kreis, goldener Rand, leicht gedreht */
.nb-method__badge {
	/* Kreis wie auf „Zahlen und Fakten“ (blocks/stats): weiß, goldener Rand, Icon, Zahl in Gold, Bezeichnung */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	width: 200px;
	height: 200px;
	margin: -90px -40px 0 0;
	padding: 20px;
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 100%;
	background: var(--wp--preset--color--white);
	box-sizing: border-box;
	text-align: center;
}

.nb-method--image-right .nb-method__badge {
	align-self: flex-start;
	margin-right: 0;
	margin-left: -40px;
}

.nb-method__badge-icon {
	margin-bottom: 10px;
	color: var(--wp--preset--color--text);
}

.nb-method__badge-icon svg {
	display: block;
	width: 52px;
	height: 52px;
}

.nb-method__badge-value {
	display: inline-block;
	font-size: 36px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--gold);
	text-align: center; /* Mindestbreite beim Hochzählen, Zahl bleibt mittig */
}

.nb-method__badge-label {
	max-width: 140px;
	font-size: 16px;
	line-height: 1.2;
	color: var(--wp--preset--color--text);
	text-align: center;
}

.nb-method__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 60%;
	max-width: 700px;
}

.nb-method--image-right .nb-method__content {
	align-items: flex-end;
	max-width: 750px;
	text-align: right;
}

.nb-method .nb-method__heading {
	margin-bottom: 0;
}

.nb-method .nb-method__subheading {
	margin-bottom: 20px;
}

.nb-method .nb-method__text {
	font-size: 22px;
	text-align: left;
}

.nb-method--image-right .nb-method__text {
	text-align: right;
}

.nb-method .nb-method__text + .nb-buttons {
	margin-top: 20px;
}

@media (max-width: 1120px) {
	.nb-method__media {
		width: 37%;
	}
}

@media (max-width: 991px) {
	.nb-method.nb-pt-large .nb-inner {
		padding-top: 55px;
	}

	.nb-method__row {
		gap: 30px;
	}

	.nb-method__badge {
		width: 170px;
		height: 170px;
		margin: -70px -10px 0 0;
	}

	.nb-method--image-right .nb-method__badge {
		margin: -70px 0 0 -10px;
	}

	.nb-method__badge-icon svg {
		width: 40px;
		height: 40px;
	}

	.nb-method__badge-value {
		font-size: 30px;
	}

	.nb-method .nb-method__text {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.nb-method.nb-pt-large .nb-inner {
		padding-top: 0;
	}

	.nb-method__row {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0;
	}

	.nb-method__media,
	.nb-method--image-right .nb-method__media {
		order: 0;
		width: 80%;
	}

	.nb-method__content,
	.nb-method--image-right .nb-method__content {
		order: 2;
		width: 100%;
		align-items: flex-start;
		text-align: left;
	}

	.nb-method--image-right .nb-method__text {
		text-align: left;
	}

	.nb-method__badge,
	.nb-method--image-right .nb-method__badge {
		width: 140px;
		height: 140px;
		margin: -60px 0 0;
		padding: 12px;
		align-self: flex-end;
	}

	.nb-method__badge-icon {
		margin-bottom: 4px;
	}

	.nb-method__badge-icon svg {
		width: 30px;
		height: 30px;
	}

	.nb-method__badge-value {
		font-size: 24px;
	}

	.nb-method__badge-label {
		font-size: 13px;
	}
}

@media (max-width: 479px) {
	.nb-method .nb-method__text {
		font-size: 18px;
	}
}