@font-face {
   font-family: 'Benedikt-Variable-Demo';
   src: url('/assets/fonts/benedikt-variable-demo.ttf');
}

/* CSS Color Override */

:root{
	--accent: 168,35,68;
}


/* Satzspiegel Fix */


.content,
footer{
	max-width: 72rem;
}


main section,
main aside{
	max-width: none;
}


@media screen and (min-width: 40rem) {
 	
	section.full-width > *,
	.teaser-item{
		max-width: 72rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

}


/* Benedikt Variable Test */

.variable-font-demo{
	width: 100%;
	height: 20rem;
	font-size: 15em;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	padding: 0rem 1rem 4rem 1rem;
	font-family: 'Benedikt-Variable-Demo';
	font-variation-settings: 'wght' 50;
	color: rgba(239, 0, 56, 1);
	color: rgba(var(--accent),1);
	background-color: rgba(17, 17, 17, 1);;
	background-color: rgba(var(--dark),1);
	position: relative;
	font-feature-settings: "kern" on, "liga" on, "calt" on;
	-moz-font-feature-settings: "kern" on, "liga" on, "calt" on;
	-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on;
	-ms-font-feature-settings: "kern" on, "liga" on, "calt" on;
	-o-font-feature-settings: "kern" on, "liga" on, "calt" on;
}

@media screen and (min-width: 40rem) {
	
	.variable-font-demo{
		font-size: 20em;
		height: 30rem;
	}
	
}


.accent-color{
	
	fill: blue!important;
}

.variable-slider{
	width: 90%!important;
	position: absolute;
	bottom: 1.5rem;
	left: auto;
	right: auto;
}