@layer utilities {
	.hidden {
		display: none;
	}
	.wrap {
		display: block;
		width: 100%;
		max-width: calc(1280px + 7%);
		margin: 0 auto;
		padding: 0 3.5%;
		@media (max-width: 400px) {
			padding: 0 4.5%;
		}
		.supplier & {
			position: relative;
		}
		.service & {
			padding-left: calc(2vw + 3.5%);
		}

		&:last-child:not(:first-child) {
			padding-bottom: 4rem;
		}
		&:not(.headline) + .nohighlight {
			padding-top: 0;
		}
		&.spacebottom {
			padding-bottom: 3rem;
		}
		&.spacetop {
			padding-top: 3rem;
		}
		&.headline + .wrap.articleheader {
			padding-top: 3rem!important;
		}
	}

	

	.editlink {
		position: absolute;
		right: 3.5%;
		top: 0;
	}

	
	.highlight, .nohighlight {
		position: relative;
		z-index: 0;
		padding-top: 5rem;
		padding-bottom: 5rem;
		&:has(.blocktitle) {
			z-index: 1;
		}
	}

	.highlight {
		background: var(--darkpaper);
		& + .highlight {
			padding-top: 1px;
			margin-top: -2rem;
		}
	}

	.nohighlight {
		& + .nohighlight {
			padding-top: 1px;
			margin-top: -2rem;
		}
		& + .articlefooter {
			margin-top: -6rem;
		}
	}

	.icon {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		& svg {
			width: 100%;
			height: 100%;
		}
	}
	.kicker {
		font-size: var(--fontsize-kicker);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		line-height: 1.3333;
		max-width: var(--maxwidth);
		
	}

	.headlinewrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mainheadline {
		font-size: var(--fontsize-h1);
		font-weight: 700;
		line-height: 1.166;
		text-wrap: balance;
		margin: 1rem 0 1.5rem 0;
		@media (max-width: 500px) {
			hyphens: auto;
		}
	}

	.subheadline {
		font-size: var(--fontsize-h2);
		line-height: 1.3;
		font-weight: 700;
		margin-bottom: 1rem;
		max-width: var(--maxwidth);
	}


	.teasertext {
		font-size: var(--fontsize-teaser);
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 1.5;
		max-width: var(--maxwidth);
		margin: 1rem 0 2rem 0;
		a {
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.3em;
			&:hover {
				text-decoration-thickness: 2px;
			}
		}
	}

	

	.blocktitle {
		font-size: var(--fontsize-h2);
		text-transform: uppercase;
		font-variant: all-small-caps;
		font-weight: 800;
		letter-spacing: 0.02em;
		line-height: 1;
		width: fit-content;
		margin: 0 auto;
		max-width: calc(100% - 7rem);
		text-align: center;
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		span {
			display: inline-block;
			padding-bottom: 0.225em;
			
		}

		&::after,
		&::before {
			content: '';
			position: absolute;
			inset: -0.4em -1.5em -0.6rem -1.5em;
			background: url('../img/rectangle-pointy-shadow.svg') no-repeat center center;
			background-size: 100% 100%;
			transform: translateY(0.2em) translateX(0.2em);
			z-index: -1;
		}
		&::after {
			background-image: url('../img/rectangle-pointy.svg');
			transform: none;
		}
		&.betweennohighlight {
			margin: 0 auto -5rem auto;
		}
		&.betweendynamic {
			.nohighlight + & {
				margin-bottom: -1.333rem;
			}
			.highlight + & {
				margin-top: -1.333rem;
				& + .highlight {
					margin-top: -1.666rem;
					padding-top: 5.333rem;
				}
			}
		}
	}

	.widgetwrap {
		position: fixed;
		z-index: 20;
		inset: 0;
		background: rgba(0,0,0,.8);
		padding: 20px;
		display: grid;
		place-items: center;
		place-content: center;
		& > *:first-child {
			width: 90vw;
		
		}
		& .videoembed {
			aspect-ratio: 16/9;
			position: relative;
		}
		& .lernsnackembed {
			height: 95vh;
			width: 95vw;
			position: relative;
		}
		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			display: block;
			border: none;
		}
	}
	.widgetclose {
		position: fixed;
		top: 2%;
		right: 2%;
		background: none;
		border: none;
		color: white;
		font-size: 3rem;
	}

	.highlight-2, .highlight-3, .highlight-4 {
		padding: 2rem;
		
		@media (min-width: 1440px) {
			margin-left: -2rem;
			margin-right: -2rem;
		}
		
		
		& > svg {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			.splide & {
				bottom: -6rem;
				height: calc(100% + 6rem);
			}
		}

		.usertext {
			margin: 2.3rem auto;
			max-width: var(--maxwidth);
		}
	}
	.highlight-2, .highlight-3 {
		color: white;
		fill: white;
	}
	.highlight-2 > svg {
		fill: var(--blue);
	}
	.highlight-3 > svg 	{
		fill: var(--green);
	}
	.highlight-4 > svg {
		fill: var(--yellow);
	}

	.date {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: var(--fontsize-normal);
		font-weight: 700;
		letter-spacing: 0.03em;
		line-height: 1;
	}

	.capsitem {
		font-variant: all-small-caps;
		font-weight: 700;
		font-size: 0.875rem;
		line-height: 0.75;
		white-space: nowrap;
		position: relative;
		z-index: 1;
		.link {
			display: inline-flex;
			align-items: center;
			
			letter-spacing: 0.04em;
			padding: 0 0.5rem;
			gap: 0.7rem;
			position: relative;
			@media (max-width: 1001px) {
				height: 1.5rem;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
			span {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
			}
			
			&::before {
				opacity: 0;
				pointer-events: none;
				content: '';
				position: absolute;
				inset: -0.25rem 0 -0.3rem 0;
				background: url('../img/highlightbox.svg') 50% 50% no-repeat;
				background-size: 100% 100%;
				z-index: 0;
			}
			& svg {
				width: 1.5rem;
				height: 1.5rem;
				position: relative;
				fill: currentColor;
				
			}
			&:hover, &:active {
				text-decoration: underline;
				text-decoration-thickness: 1px;
				text-underline-offset: 0.2em;
				&::before {
					opacity: 1;
				}
			}
		}

		&.social .link {
			
			padding-top: 0!important;
			padding-bottom: 0!important;
		}
		
	}
	.smallprint {
		font-size: 0.875rem;
		color: #888;
		a {
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.2em;
			&:hover, &:active {
				text-decoration-thickness: 2px;
			}
		}
	}

	.required {
		.wrap > & {
			float: right;
		}
		.star {
			color: var(--orange);
		}
	}

	.toplink {
		position: fixed;
		bottom: 2rem;
		right: 2rem;
		z-index: 1000;
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease;
		clip-path: var(--circle);
		@media (max-width: 600px) {
			bottom: 1rem;
			right: 1rem;
		}
		&.active {
			opacity: 1;
			pointer-events: auto;
		}
		a {
			display: block;
			background-color: black;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.12s ease;
			opacity: 0.3;
			@media (max-width: 600px) {
				width: 3rem;
				height: 3rem;
			}
			&:hover, &:active {
				opacity: 0.5;
				transform: scale(1.1);
				box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
			}
		}
		.icon {
			width: 2.5rem;
			height: 2.5rem;
			fill: white;
			@media (max-width: 600px) {
				width: 2rem;
				height: 2rem;
			}
		}
		
	}
	.hyphens {
		hyphens: auto;
	}

	.tooltip {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
		position: relative;
		.tooltipcontent {
			width: 280px;
			position: absolute;
			background: var(--green);
			color: white;
			font-size: 0.875rem;
			text-transform: none;
			font-weight: 400;
			line-height: 1.3;
			letter-spacing: 0;
			padding: 1rem;
			box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
			z-index: 1000;
			clip-path: var(--square);
			
		}
	}

	.datatable {
		border-collapse: collapse;
		th, td {
			padding: 0.5rem;
			border-top: 1px solid #ccc;
		}
		th {
			text-align: left;
		}
	}

	.twocols {
		@media (min-width: 768px) {
		display: flex;
			gap: 2rem;
			flex-wrap: wrap;
			& > * {
				flex: 1;
			}
		}
		@media (max-width: 767px) {
			display: block;
		}
	}

	#mc_embed_signup {
		max-width: 100%!important;
		width: auto!important;
		padding: 1rem;
	}

	[x-cloak] { display: none !important; }

}