/* REIMAGINE */
:root { --grid-gap: 24px; --start-end-marker-width: 60px; --stroke-width: 10px; --stroke-color: #ff5c39 }

main { letter-spacing: -0.03em }
	main h1, main h2, main h3 { letter-spacing: -0.05em; }
	main strong { font-weight: 600 }

.reimagine .card { background-color: white; border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px; }
	.reimagine .card > picture > img { /*border-top-left-radius: 24px; border-top-right-radius: 24px; */ object-fit: cover; aspect-ratio: 800/450 }
	.reimagine .card > picture { margin: 8px; border-radius: 16px; overflow: clip }
.reimagine .card-body { padding: 12px 24px 24px 24px }
.reimagine .card-footer { padding: 24px }
.cta.no-block .glyph:before {position:relative;left:4px;display:inline-block;top:3px}

.text-gradient { background: linear-gradient(to right, #fe5b4c, #ce4ccd); background-clip: text; -webkit-text-fill-color: transparent; line-height: 130% }

#learning-path { display: grid; grid-gap: var(--grid-gap); }
	#learning-path > * { position: relative; }
		/* #73262f */
		#learning-path > *::before { content: ''; height: var(--stroke-width); width: var(--grid-gap); background-color: var(--stroke-color); position: absolute; top: calc(50% - var(--stroke-width) / 2); left: 100%; display: none; }
		#learning-path > *::after { content: ''; height: var(--grid-gap); width: var(--stroke-width); background-color: var(--stroke-color); position: absolute; top: 100%; left: calc(50% - var(--stroke-width) / 2); display: none; }
#start, #end { justify-self: end; align-self: center; background-color: var(--stroke-color); color: white; font-weight: 600; height: var(--start-end-marker-width); width: var(--start-end-marker-width); border-radius: 50% }
	#start .glyph-append:after, #end .glyph-append:after { font-size: 50px; line-height: var(--start-end-marker-width) }
	#end > *:after { margin-left: -2px }

#personas { padding-left: 0 }
	#personas .card { width: 240px; flex-grow: .5; max-width: 280px; background-color: white; border: 1px solid #e6f2fb; border-radius: 24px }
	#personas img.rounded-circle { width: 180px; height: 180px }

.c-uhff { margin-top: 0 }

/*
@media screen and (min-width: 1401px) {
	#learning-path { grid-template:
			"a b c d e" auto
			". . h g f" auto / auto 1fr 1fr 1fr 1fr; }
		#learning-path > *[style='grid-area:a']::before,
		#learning-path > *[style='grid-area:b']::before,
		#learning-path > *[style='grid-area:c']::before,
		#learning-path > *[style='grid-area:d']::before,
		#learning-path > *[style='grid-area:g']::before,
		#learning-path > *[style='grid-area:h']::before,
		#learning-path > *[style='grid-area:e']::after { display: initial }
}
*/

@media screen and (min-width:1084px) { /* and (max-width: 1400px) */
	#end { justify-self: start; }
	#learning-path { grid-template:
			"a b c d" auto
			"h g f e" auto / auto 1fr 1fr 1fr; }
		#learning-path > *[style='grid-area:a']::before,
		#learning-path > *[style='grid-area:b']::before,
		#learning-path > *[style='grid-area:c']::before,
		#learning-path > *[style='grid-area:f']::before,
		#learning-path > *[style='grid-area:g']::before,
		#learning-path > *[style='grid-area:h']::before,
		#learning-path > *[style='grid-area:d']::after { display: initial }
}

@media screen and (min-width: 861px) and (max-width: 1083px) {
	#start { justify-self: center; }
	#end { justify-self: center; }
	#learning-path { grid-template:
			"a . ." auto
			"b c d" auto
			"g f e" auto
			"h . ." auto / 1fr 1fr 1fr; }
		#learning-path > *[style='grid-area:b']::before,
		#learning-path > *[style='grid-area:c']::before,
		#learning-path > *[style='grid-area:g']::before,
		#learning-path > *[style='grid-area:f']::before,
		#learning-path > *[style='grid-area:a']::after,
		#learning-path > *[style='grid-area:d']::after,
		#learning-path > *[style='grid-area:g']::after { display: initial }
}

@media screen and (min-width: 601px) and (max-width: 860px) {
	#start { justify-self: center; }
	#end { justify-self: center; }
	#learning-path { grid-template:
			"a ." auto
			"b c" auto
			"e d" auto
			"f g" auto
			". h" auto / 1fr 1fr; }
		#learning-path > *[style='grid-area:b']::before,
		#learning-path > *[style='grid-area:e']::before,
		#learning-path > *[style='grid-area:f']::before,
		#learning-path > *[style='grid-area:i']::before,
		#learning-path > *[style='grid-area:a']::after,
		#learning-path > *[style='grid-area:c']::after,
		#learning-path > *[style='grid-area:e']::after,
		#learning-path > *[style='grid-area:g']::after { display: initial }
}

@media (max-width: 600px) {
	#start, #end { justify-self: center; }
	#learning-path { grid-template:
			"a" auto
			"b" auto
			"c" auto
			"d" auto
			"e" auto
			"f" auto
			"g" auto
			"h" auto / 1fr; }
		#learning-path > *:not(:last-child)::after { display: initial }
}

@media (min-width: 540px) {
}

@media (min-width: 860px) {
}

@media (min-width: 1084px) {
	h1 { font-size: 62px; line-height: 100% }
	h2 { font-size: 48px; line-height: 120% }
	.multi-feature-feature { width: 50% }
	.multi-feature .accordion { width: calc(50% - 24px); padding: 3em !important; height: 100% !important; min-height: 680px }
}

@media (min-width: 1400px) {
}

@media (max-width: 600px) {
	#personas .card { width: 100%; max-width: 100% }
}

.multi-feature { background-color: white; border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px; padding: 8px }
.multi-feature-feature { border-radius: 16px; height: calc(100% - 16px) !important; margin-top: 8px; margin-right: 8px }
.area-heading h2 { max-width: 800px; margin-left: auto; margin-right: auto }
.area-heading p { max-width: 1000px; margin-left: auto; margin-right: auto }
.reimagine .card .row { padding: 8px }
.reimagine .card img { border-radius: 16px }
.accordion.accordion-backplate .btn-collapse[aria-expanded=true] { background: unset; }
.accordion > li:has(.collapse.show) { border-left: 4px solid #73262f; margin-left: -4px }

.bg-fade-0 { background-color: #f6f3ec }
.bg-fade-1 { background-image: url(solutions-background-355281.jpg); background-position: top right; background-size: cover }
.bg-fade-2 { background-image: radial-gradient(circle at 80% 30%, #e2c8ccff 0, #fcfbf900 40%), radial-gradient(circle at 60% -20%, #ead6c2ff 0, #fcfbf9ff 60%) }
.bg-fade-3 { background-color: #fefcfb; }
/* .bg-fade-1 { background-color: #fefcfb; background-image: url(485605-Discover-Background-1600x736.webp); background-position: top right; background-size: contain; background-repeat: no-repeat } */

#journey { display: grid; grid-gap: var(--grid-gap); max-width: 1083px; margin-left: auto; margin-right: auto }
#journey { grid-template:
		"a b" auto
		"c c" auto
		"d d" auto / 1fr 1fr; }

@media (max-width: 600px) {
	#start, #end { justify-self: center; }
	#journey { grid-template:
			"a" auto
			"b" auto
			"c" auto
			"d" auto / 1fr; }
	#learning-path > *:not(:last-child)::after { display: initial }
}

#journey .card { background-color: #fefcfb; text-align: center; padding-top: 24px; padding-bottom: 24px }
/* f6f3ec */
#journey .card-body { padding-top: 16px; padding-bottom: 0 }
#journey > *:not(:last-of-type)::after { content: ""; font-family: "MWF-FLUENT-ICONS"; position: absolute; z-index: 2; top: calc(100% - var(--start-end-marker-width) * .5 + var(--grid-gap) * .5); left: calc(50% - var(--start-end-marker-width) / 2); justify-self: end; align-self: center; background-image: radial-gradient(circle at 100% 130%, #fd5f40 0, #a02c55 90%); color: white; font-weight: 600; height: var(--start-end-marker-width); width: var(--start-end-marker-width); border-radius: 50%; font-size: 32px; line-height: var(--start-end-marker-width) }

.reimagine .nav-in-page-bar { font-size: 14px; font-weight: 600 }
.reimagine .nav-in-page-item { padding-top: 16px; padding-bottom: 12px }
.reimagine .nav-in-page::before { visibility: hidden }
.reimagine .nav-in-page-label {font-size:100%;display:none}
.nav-in-page-bar-container:not(:has(.combobox)) { background-color: #fefefe; box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 1.008px 2px 0px; position: relative; width: 100%; }
.reimagine .nav-in-page-container.combobox label {font-size:12px;color:#4d4844;padding-top:1em;padding-left:1em;margin-bottom:4px}

.reimagine .badge { color: #4d4844; font-size: 12px; text-transform: uppercase; padding-left: 0; padding-right: 0; margin-bottom: 1em }

#teilnahmebedingungen tr > * { border: 1px solid #d2d2d2; padding: 1em 1.5em }
#teilnahmebedingungen thead tr > * { border-bottom-color: #757575 }
#teilnahmebedingungen ol > li { padding-bottom: 1em; padding-left: 1em }
	#teilnahmebedingungen ol > li ul { padding-left: 1em; margin-top: .5em }