/**
 * Theme Part M85 - 4 Wege (Redesign 2026)
 *
 * @author MediaMEANS
**/

section.m85_vier_wege {
	position: relative;
	background: #fff;
}

/* === Abstand === */
section.m85_vier_wege[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
	padding-top: 136px;
	padding-bottom: 136px;
}

section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_oben"] {
	padding-top: 136px;
}

section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_unten"] {
	padding-bottom: 136px;
}

/* === Layout: Text links (.95) | Netz rechts (1.05) === */
section.m85_vier_wege .m85_vier_wege_main {
	display: flex;
	align-items: center;
	gap: 72px;
}

section.m85_vier_wege .m85_content_container {
	flex: .95 1 0;
	min-width: 0;
}

section.m85_vier_wege .m85_netz_wrapper {
	position: relative;
	flex: 1.05 1 0;
	min-width: 0;
	max-width: 700px;
	margin-left: auto;
}

/* === Kopf === */
section.m85_vier_wege .m85_top.mobile { display: none; }
section.m85_vier_wege .m85_kicker {
	display: block;
	margin-bottom: 18px;
	color: #FE5B4A;
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	font-size: .75rem;
	line-height: 1.3;
	letter-spacing: .105rem;
	text-transform: uppercase;
}

section.m85_vier_wege .m85_titel {
	margin: 0;
	color: #1919BD;
	font-family: Nexa-Heavy, sans-serif; /* 900 */
	font-weight: 400;
	font-size: 3.75rem;
	line-height: 1.06;
	letter-spacing: -.08rem;
}

section.m85_vier_wege .m85_lead {
	max-width: 560px;
	margin: 16px 0 0;
	color: #1A1A73;
	font-size: 1.125rem;
	line-height: 1.6;
}

/* === Wege === */
section.m85_vier_wege .m85_wege {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

section.m85_vier_wege .m85_weg {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 -18px 0 -16px;
	padding: 16px 18px 16px 16px;
	border-radius: 18px;
	color: inherit;
	text-decoration: none;
	-webkit-transition: background .3s;
	transition: background .3s;
}

section.m85_vier_wege .m85_weg_bar {
	flex: none;
	align-self: stretch;
	width: 6px;
	border-radius: 6px;
	background: #1919BD;
	-webkit-transition: transform .35s, background .3s;
	transition: transform .35s, background .3s;
}

section.m85_vier_wege .m85_weg_text {
	flex: 1 1 auto;
	min-width: 0;
}

section.m85_vier_wege .m85_weg_label {
	display: block;
	margin-bottom: 4px;
	color: #62629A;
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	font-size: .75rem;
	line-height: 1.3;
	letter-spacing: .075rem;
	text-transform: uppercase;
}

section.m85_vier_wege .m85_weg_headline {
	display: block;
	color: #1A1A73;
	font-family: Nexa-Heavy, sans-serif; /* 900 */
	font-weight: 400;
	font-size: 1.5625rem;
	line-height: 1.15;
	letter-spacing: -.03rem;
	-webkit-transition: color .3s;
	transition: color .3s;
}

section.m85_vier_wege .m85_weg_beschreibung {
	display: block;
	margin-top: 5px;
	color: #1A1A73;
	font-size: .90625rem;
	line-height: 1.5;
}

section.m85_vier_wege .m85_weg_go {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1.5px solid #E1E2EE;
	border-radius: 50%;
	color: #1919BD;
	-webkit-transition: background .3s, border-color .3s, color .3s, transform .4s;
	transition: background .3s, border-color .3s, color .3s, transform .4s;
}

section.m85_vier_wege .m85_weg_go svg,
section.m85_vier_wege .m85_weg_go img {
	display: block;
	width: 15px;
	height: 15px;
}

/* hover / focus / ping (from the net or from links elsewhere on the page) */
section.m85_vier_wege .m85_weg:hover,
section.m85_vier_wege .m85_weg:focus-visible,
section.m85_vier_wege .m85_weg.is-ping {
	background: #F4F5FC;
	color: inherit;
}

section.m85_vier_wege .m85_weg:hover .m85_weg_headline,
section.m85_vier_wege .m85_weg.is-ping .m85_weg_headline {
	color: #1919BD;
}

section.m85_vier_wege .m85_weg:hover .m85_weg_bar,
section.m85_vier_wege .m85_weg:focus-visible .m85_weg_bar,
section.m85_vier_wege .m85_weg.is-ping .m85_weg_bar {
	background: #FE5B4A;
	transform: scaleY(1.08);
}

section.m85_vier_wege .m85_weg:hover .m85_weg_go,
section.m85_vier_wege .m85_weg:focus-visible .m85_weg_go,
section.m85_vier_wege .m85_weg.is-ping .m85_weg_go {
	border-color: #FE5B4A;
	background: #FE5B4A;
	color: #fff;
	transform: translateX(3px);
}

/* === Abschluss === */
section.m85_vier_wege .m85_abschluss_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid #E3E3EA;
}

section.m85_vier_wege .m85_abschluss {
	max-width: 340px;
	margin: 0;
	color: #1A1A73;
	font-size: .9375rem;
	line-height: 1.6;
}

section.m85_vier_wege .m85_abschluss b {
	display: block;
	color: #1919BD;
	font-family: Nexa-Heavy, sans-serif; /* 900 */
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: -.017rem;
}

/* Nexa sitzt hoch in der Zeile: oben mehr Padding als unten */
section.m85_vier_wege .m85_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 26px 14px;
	border-radius: 999px;
	background: #FE5B4A;
	color: #fff;
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.3;
	letter-spacing: -.005rem;
	text-decoration: none;
	-webkit-transition: background .25s, transform .25s;
	transition: background .25s, transform .25s;
}

section.m85_vier_wege .m85_button:hover {
	background: #ff735f;
	color: #fff;
}

section.m85_vier_wege .m85_button:active {
	transform: scale(.98);
}

section.m85_vier_wege .m85_button_icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	margin-top: -4px;
	-webkit-transition: transform .3s;
	transition: transform .3s;
}

section.m85_vier_wege .m85_button_icon svg,
section.m85_vier_wege .m85_button_icon img {
	display: block;
	width: 100%;
	height: 100%;
}

section.m85_vier_wege .m85_button:hover .m85_button_icon {
	transform: translateX(4px);
}

/* === Netz (SVG aus der Mediathek, Klassen siehe m85_vier_wege.php) === */
section.m85_vier_wege .m85_netz svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

section.m85_vier_wege .m85_netz .ln-g {
	cursor: pointer;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}

section.m85_vier_wege .m85_netz .ln-p {
	stroke: #1919BD;
	-webkit-transition: stroke-width .5s, stroke .3s;
	transition: stroke-width .5s, stroke .3s;
}

section.m85_vier_wege .m85_netz .stop circle {
	stroke: #1919BD;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	-webkit-transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), stroke .3s;
	transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), stroke .3s;
}

section.m85_vier_wege .m85_netz .stop text {
	font-family: Nexa-Bold, sans-serif;
	font-weight: 400;
	fill: #1A1A73;
	opacity: 0;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
}

section.m85_vier_wege .m85_netz .stop.is-on circle {
	transform: scale(1);
}

section.m85_vier_wege .m85_netz .stop.is-on text {
	opacity: 1;
}

section.m85_vier_wege .m85_netz .term text {
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	fill: #62629A;
	opacity: 0;
	-webkit-transition: opacity .4s, fill .3s;
	transition: opacity .4s, fill .3s;
}

section.m85_vier_wege .m85_netz .term.is-on text {
	opacity: 1;
}

section.m85_vier_wege .m85_netz .train {
	stroke: #1919BD;
	opacity: 0;
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
}

section.m85_vier_wege .m85_netz .train.is-on {
	opacity: 1;
}

section.m85_vier_wege .m85_netz .flow {
	stroke-dasharray: .01 22;
	opacity: 0;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}

/* when all lines are drawn: thicker lines, flowing dots, hub turns dark */
section.m85_vier_wege .m85_netz.is-end .ln-p {
	stroke-width: 14;
}

section.m85_vier_wege .m85_netz.is-end .stop circle {
	stroke-width: 5;
}

section.m85_vier_wege .m85_netz.is-end .flow {
	opacity: .95;
	-webkit-animation: m85_flow 1s linear infinite;
	animation: m85_flow 1s linear infinite;
}

@-webkit-keyframes m85_flow {
	to { stroke-dashoffset: -22.01; }
}

@keyframes m85_flow {
	to { stroke-dashoffset: -22.01; }
}

/* focus of one way: the others fade out, the focused one turns coral */
section.m85_vier_wege .m85_netz.has-focus .ln-g:not(.is-focus) {
	opacity: .22;
}

section.m85_vier_wege .m85_netz.has-focus .ln-g.is-focus .ln-p {
	stroke-width: 15;
}

section.m85_vier_wege .m85_netz .ln-g.is-focus .ln-p,
section.m85_vier_wege .m85_netz .ln-g.is-focus .stop circle,
section.m85_vier_wege .m85_netz .ln-g.is-focus .train {
	stroke: #FE5B4A;
}

section.m85_vier_wege .m85_netz .ln-g.is-focus .term text {
	fill: #E84634;
}

/* hub */
section.m85_vier_wege .m85_netz .hub rect {
	fill: #fff;
	stroke: #08083E;
	-webkit-transition: fill .6s;
	transition: fill .6s;
}

section.m85_vier_wege .m85_netz .hub .t2 {
	font-family: Nexa-Bold, sans-serif;
	font-weight: 400;
	fill: #62629A;
	-webkit-transition: fill .6s;
	transition: fill .6s;
}

section.m85_vier_wege .m85_netz .hub .core {
	transform-box: fill-box;
	transform-origin: center;
}

section.m85_vier_wege .m85_netz.is-end .hub .core {
	-webkit-animation: m85_hub_pop .8s cubic-bezier(.3, 1.7, .5, 1);
	animation: m85_hub_pop .8s cubic-bezier(.3, 1.7, .5, 1);
}

section.m85_vier_wege .m85_netz.is-end .hub rect {
	fill: #08083E;
}

section.m85_vier_wege .m85_netz.is-end .hub .t2 {
	fill: rgba(255, 255, 255, .7);
}

/* logo from the options lies over the hub (position = hub in the 640×640 viewBox) */
section.m85_vier_wege .m85_netz_logo {
	position: absolute;
	top: 46.9%;
	left: 38.3%;
	display: block;
	width: 23.4%;
	color: #08083E;
	pointer-events: none;
	-webkit-transition: color .6s;
	transition: color .6s;
}

section.m85_vier_wege .m85_netz_logo svg,
section.m85_vier_wege .m85_netz_logo img {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

section.m85_vier_wege .m85_netz.is-end .m85_netz_logo {
	color: #fff;
	-webkit-animation: m85_hub_pop .8s cubic-bezier(.3, 1.7, .5, 1);
	animation: m85_hub_pop .8s cubic-bezier(.3, 1.7, .5, 1);
}

@-webkit-keyframes m85_hub_pop {
	0% { transform: scale(.92); }
	60% { transform: scale(1.07); }
	100% { transform: scale(1); }
}

@keyframes m85_hub_pop {
	0% { transform: scale(.92); }
	60% { transform: scale(1.07); }
	100% { transform: scale(1); }
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 1399px) {
	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 130px;
		padding-bottom: 130px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 130px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 130px;
	}

	section.m85_vier_wege .m85_vier_wege_main {
		gap: 60px;
	}

	section.m85_vier_wege .m85_titel {
		font-size: 3.375rem;
		letter-spacing: -.07rem;
	}

	section.m85_vier_wege .m85_weg_headline {
		font-size: 1.4375rem;
	}
}

@media screen and (max-width: 1199px) {
	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 110px;
		padding-bottom: 110px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 110px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 110px;
	}

	section.m85_vier_wege .m85_vier_wege_main {
		gap: 48px;
	}

	section.m85_vier_wege .m85_titel {
		font-size: 3rem;
		letter-spacing: -.065rem;
	}

	section.m85_vier_wege .m85_weg_headline {
		font-size: 1.3125rem;
	}
}

/* tablet: net on top, centered */
@media screen and (max-width: 991px) {
	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 96px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 96px;
	}

	section.m85_vier_wege .m85_vier_wege_main {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 28px;
	}

	section.m85_vier_wege .m85_content_container {
		flex: none;
	}
	
	section.m85_vier_wege .m85_netz {
		position: relative;
	}

	section.m85_vier_wege .m85_netz_wrapper {
		flex: none;
		order: -1;
		width: 100%;
		max-width: 440px;
		margin: 0 auto;
	}

	section.m85_vier_wege .m85_netz .stop text,
	section.m85_vier_wege .m85_netz .term text {
		display: none;
	}

	section.m85_vier_wege .m85_titel {
		font-size: 2.625rem;
		letter-spacing: -.055rem;
	}

	section.m85_vier_wege .m85_weg {
		margin: 0 -12px;
		padding: 14px 12px;
	}

	section.m85_vier_wege .m85_weg_go {
		display: none;
	}

	section.m85_vier_wege .m85_weg_headline {
		font-size: 1.25rem;
	}
	
	section.m85_vier_wege .m85_top.desktop { display: none; }
	section.m85_vier_wege .m85_top.mobile { display: block; }
}

@media screen and (max-width: 767px) {
	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 80px;
	}

	section.m85_vier_wege[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 80px;
	}

	section.m85_vier_wege .m85_titel {
		font-size: 2.25rem;
		letter-spacing: -.05rem;
	}

	section.m85_vier_wege .m85_lead {
		font-size: 1.0625rem;
	}
}

@media screen and (max-width: 375px) {
	section.m85_vier_wege .m85_titel {
		font-size: 1.875rem;
		letter-spacing: -.04rem;
	}

	section.m85_vier_wege .m85_weg_headline {
		font-size: 1.125rem;
	}

	section.m85_vier_wege .m85_button {
		padding: 16px 18px 12px;
		font-size: .8125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	section.m85_vier_wege *,
	section.m85_vier_wege *::before,
	section.m85_vier_wege *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}