@font-face{
    font-family: 'Source Sans 3 VF';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
	font-display: block;
    src: url('/site/templates/fonts/SourceSans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'),
         url('/site/templates/fonts/SourceSans/WOFF/VAR/SourceSans3VF-Roman.ttf.woff') format('woff'),
         url('/site/templates/fonts/SourceSans/VAR/SourceSans3VF-Roman.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Sans 3 VF';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
	font-display: block;
    src: url('/site/templates/fonts/SourceSans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2'),
         url('/site/templates/fonts/SourceSans/WOFF/VAR/SourceSans3VF-Italic.ttf.woff') format('woff'),
         url('/site/templates/fonts/SourceSans/VAR/SourceSans3VF-Italic.ttf') format('truetype');
}

:root {
	--yellow-old: rgb(255, 255, 102);
	--yellow-old-light: rgba(255, 255, 102, 0.6);
	--yellow-old-superlight: rgba(255, 255, 102, 0.15);
	--yellow: rgb(253, 245, 105);
	--yellow-light: rgba(251, 245, 151);
	--yellow-superlight: rgba(253, 245, 105, 0.15);
	--cyan: rgb(110, 188, 191);
	--cyan-light: rgb(197, 228, 229); /* rgba(110, 188, 191, 0.4) */
	--cyan-superlight: rgb(240, 248, 248); /*--cyan-superlight: rgba(110, 188, 191, 0.10);*/
	--black: rgb(0, 0, 0);
	--black-ish: rgba(0, 0, 0, 0.9);
	--black-light: rgba(0, 0, 0, 0.5);
	--black-mediumlight: rgba(0, 0, 0, 0.07);
	--black-superlight: rgba(0, 0, 0, 0.02);
	--white: rgb(255, 255, 255);
	--white-light: rgba(255, 255, 255, 0.83);
	--marker-yellow: linear-gradient(to right, var(--yellow-light), var(--yellow) 4%, var(--yellow-light));
	--marker-yellow: linear-gradient(to right, var(--yellow-light), var(--yellow) 4%, var(--yellow-light));
	--border: 1px solid var(--cyan);
	--marker-border: 0.7em 0.3em 0.6em 0.4em;
	--transition: 100ms linear;
	--font-xxl: 1.4rem;
	--font-xl: 1.25rem;
	--font-l: 1.15rem;
	--font-m: 1rem;
	--font-s: 0.8rem;
	--font-xs: 0.6rem;
	--font-weight-xl: 800;
	--font-weight-l: 600;
	--font-weight-m: 400;
	--font-weight-s: 200;
	--space-xl: 80px;
	--space-l: 40px;
	--space-m: 20px;
	--space-s: 10px;
	--space-xs: 5px;
	font-size: 16px;
}

img {
	max-width: 100%;
}

.partner .teaser_image img, body.partner #teaser.with-image img {
	image-rendering: -webkit-optimize-contrast;
}

figure {
	margin: 0;
	padding: 0;
	display: grid;
}
figure picture {
	grid-column: 1 / 1;
	grid-row: 1 / 1;
}

figure figcaption {
	margin: 0;
	padding: 0;
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	align-self: start;
	text-align: right;
	font-size: var(--font-xs);
	display: none;
}

figure figcaption span {
	display: inline-block;
	padding: 0 3px;
	background-color: white;
	color: black;
	opacity: 0.2;
}

a {
	color: var(--black);
}
a:visited {
    color: var(--black-light);
}

body {
	font-family: 'Source Sans 3 VF', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga' on, 'clig' on, 'dlig' off;
	hyphens: auto;
	background-color: var(--white);
}

@media (min-width: 900px) {
	body {
		max-width: 1300px;
		min-height: 100vh;
		margin: 0 auto;
		padding: 0 var(--space-l) 0 0;
		display: grid;
		gap: 0 var(--space-l);
		grid-template-columns: 250px auto;
		grid-template-rows: 100px auto min-content;
		grid-template-areas:
			"header social"
			"navigation main"
			"footer footer";
		align-content: stretch;
	}

	#content {
	}
	#content p {
		line-height: 1.25;
	}
	.sticky {
		position: sticky;
		top: 0;
	}
}

@media (min-width: 1400px) {
	#aside {
		/*margin-right: -70px !important;*/
	}
}
@media (min-width: 1500px) {
	#aside {
		/*margin-right: -150px !important;*/
	}
}

/*@media (min-width: 800px) and (max-width: 1099px) {}*/

@media (max-width: 1100px) {
	body.label #aside .publication-filter, body.category_overview #aside .publication-filter {
		max-height: 290px;
		overflow: scroll;
		overflow-x: hidden;
		margin: 0 -20px;
		padding: 0 var(--space-m) var(--space-m) var(--space-m);
	}
	body.label #aside .read-more, body.category_overview #aside .read-more {
		display: block !important;
		text-align: center; 
		margin: 0 -20px -20px -20px;
		padding: 10px 0;
		background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 255));
	}
}

@media (max-width: 899px) {
	body {
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 100;
		grid-auto-rows: max-content;
		grid-template-areas:
			"header"
			"navigation"
			"main"
			"social"
			"footer";
	}
	body #header {
		padding: var(--space-s) var(--space-m) var(--space-xs) var(--space-m);
	}
	body #header #header_logo {
		background-image: url(/site/templates/images/IEP3Sterne_fuerDesktop.svg);
		background-repeat: no-repeat;
		background-position: top right;
		background-size: 150px;
	}
	body #header img {
		max-width: 250px;
	}
	body #navigation ul.navigation_main {
		padding-bottom: 0;
	}
	body #navigation ul.navigation_main li {
		display: inline;
		padding: 0 var(--space-xs) 0 0;
		hyphens: none;
	}
	body #navigation ul.navigation_main li.current ul {
		display: none;
	}
	#stars {
		display: none;
	}
	body #main {
		padding: var(--space-s);
	}
	body.home #main {
		padding-top: var(--space-m);
	}
	body #social {
		place-content: center center;
		_background-color: var(--cyan-superlight);
		padding: var(--space-m) var(--space-s) var(--space-s) var(--space-s);
	}
	body #aside {
		margin: var(--space-m) -10px;
	}
	body #teaser.with-image {
		display:block;
		text-align: center;
	}
	body #teaser.with-image p {
		text-align: left;
	}
	body #footer {
		padding: var(--space-s);
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	body.label #aside .publication-filter, body.category_overview #aside .publication-filter {
		max-height: 290px;
		overflow: scroll;
		overflow-x: hidden;
		margin: 0 -20px;
		padding: 0 var(--space-m) var(--space-m) var(--space-m);
	}
	body.label #aside .read-more, body.category_overview #aside .read-more {
		display: block !important;
		text-align: center; 
		margin: 0 -20px -20px -20px;
		padding: 10px 0;
		background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 255));
	}
}

body.label #aside .read-more, body.category_overview #aside .read-more {
	display: none;
}

/* special rules for touch devices https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer */
@media (pointer: coarse) {
	select {
	  min-height: 30px;
	}
  }

#header {
	display: grid;
	align-items: center;
	padding: 0 var(--space-m);
	padding: var(--space-s) var(--space-m) var(--space-xs) var(--space-m);
	background-color: var(--cyan-light);
	_background-color: var(--page-color);
}

#navigation {
	grid-area: navigation;
	place-self: stretch stretch;
	padding: 0 var(--space-m);
	background-color: var(--cyan-light);
	_background-color: var(--page-color);
}

#main {
	grid-area: main;
}

#social {
	grid-area: social;
	place-content: center end;
	padding: 0 var(--space-m);
	display: grid;
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	column-gap: var(--space-m);
	grid-auto-flow: column;
	place-items: center center;
}

#footer {
	grid-area: footer;
	padding: 0 var(--space-s);
	display: grid;
	gap: 0 var(--space-l);
	grid-template-columns: 250px 1fr 300px 1fr;
	justify-items: center;
	align-items: end;
	font-size: var(--font-s);
	line-height: 1;
	background-color: var(--cyan-superlight);
	margin-top: var(--space-m);
}

#footer img {
	max-width: 300px;
}

#navigation a {
	text-decoration: none;
}

#navigation ul li a {
	margin: 0em -0.4em;
	padding: 0em 0.4em;
	border-radius: var(--marker-border);
	background: transparent;
	transition: border-radius var(--transition);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#navigation ul li.current > a, #navigation ul li:not(.current) > a:hover {
	background-image: var(--marker-yellow);
}

#navigation ul {
    padding: 0;
    margin: 0;
}

#navigation ul li {
    list-style-type: none;
    _margin-top: 2px;
    margin-bottom: 2px;
}

#navigation ul.navigation_main {
    font-size: var(--font-xxl);
    font-weight: var(--font-weight-xl);
	line-height: 1.4;
}

#navigation ul ul li {
    font-size: var(--font-l);
    font-weight: var(--font-weight-m);
    line-height: 110%;
    margin-bottom: var(--space-s);
    margin-top: var(--space-s);
}

#navigation ul li:not(.current) ul {
	display: none;
}

body.logged-out #navigation ul.navigation_admin {
    display: none;
}

#navigation ul.navigation_languages,
#navigation ul.navigation_admin {
    padding: var(--space-xs) var(--space-m);
	margin: var(--space-s) -20px;
}

#_navigation > div > ul::after {
	content: '';
	display: block;
    height: 0;
	margin: var(--space-xs) auto;
	border-bottom: dotted 5px var(--cyan);
	width: 40px;
	background: transparent;
	_transform: rotateZ(90deg);
}

#navigation > div > ul {
    _border-bottom: none;
}

#navigation .navigation_languages li,
#navigation .navigation_admin li {
    display: inline;
    font-size: var(--font-s);
    padding-right: var(--space-s);
}

#social a {
	opacity: 0.7;
	width: var(--space-m);
	transition: all var(--transition);
}

#social a.share-link {
	margin-right: -5px;
	display: none; /* this is unhidden in main.js if the browser supports sharing */
}

#social a:hover{
	opacity: 1;
	transform: rotateZ(10deg) scale(1, 1);
}


#content a.share-link {
	display: none; /* this is unhidden in main.js if the browser supports sharing */
	cursor: pointer;
	margin: var(--space-m) 0 0 auto;
	background-color: var(--page-color);
	width: fit-content;
    padding: var(--space-s) var(--space-m);
    margin-bottom: -55px;
	clear: both;
}

_.meta-publication-post {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    align-items: end;
}
_.meta-publication-post > div {
	grid-column: 1 / span 2;
}

#content a.share-link img {
	width: var(--space-m);
	vertical-align: text-top;
}

#mission, .navigation_breadcrumbs, .navigation_breadcrumbs a {
	font-size: var(--font-s);
	text-decoration: none;
}

.navigation_breadcrumbs span {
	white-space: nowrap;
}

h1 {
	margin: var(--space-l) 0 var(--space-l) 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
}

#teaser.with-image {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-gap: 20px;
    align-items: end;
	margin: 0 0 var(--space-l) 0;
}

#teaser.without-image {
 	margin: 0 0 var(--space-l) 0;
}

#teaser img {
    width: 350px;
    height: 250px;
    object-fit: cover;
}

body.partner #teaser img {
    object-fit: contain;
}

#teaser p {
    margin-bottom: 0;
    font-size: var(--font-xl);
	font-style: normal;
	line-height: 1.1;
}

div.teaser {
	margin: 0;
	display: grid;
	row-gap: var(--space-s);
	column-gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

div.teaser.partner {
	row-gap: var(--space-m);
	column-gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	align-items: center;
	justify-items: center;
}

div.teaser.small {
	row-gap: var(--space-xs);
	column-gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	font-size: var(--font-m);
}

div.teaser.medium {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

a.teaser_date_separator {
	display: none;
}

body.category_overview a.teaser_date_separator, body.label a.teaser_date_separator {
	display: block;
	text-align: center;
	grid-column: 1 / -1;
	font-size: var(--font-s);
	font-weight: var(--font-weight-l);
	color: var(--black-light);
}

body.category_overview a.teaser_date_separator:first-of-type, body.label a.teaser_date_separator:first-of-type {
	display: none;
}

div.teaser .teaser_item {
	_border-bottom: var(--border);
}

div.teaser .teaser_item a {
	text-decoration: none;
	display: grid;
	overflow: hidden;
	margin: 0;
	_padding: 0.4em;
	grid-template-columns: 70px auto;
	place-items: start start;
	gap: 0 var(--space-m);
}

div.teaser.small a {
	grid-template-columns: 35px auto;
	gap: 0 var(--space-s);
}

div.teaser .teaser_item .teaser_image {
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	background-color: var(--black-superlight);
	width: 70px;
	height: 70px;
	border-radius: 0;
	border: 2px solid rgba(0, 0, 0, 0);
	overflow: hidden;
	_transition: transform var(--transition);
}

div.teaser .teaser_item.person .teaser_image {
	border-radius: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23C6C6C6' d='M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z'%3E%3C/path%3E%3C/svg%3E");
}

div.teaser .teaser_item.person .teaser_title .teaser_title_extra {
	display: block;
}

div.teaser .teaser_item.person .teaser_meta {
	display: none;
}


div.teaser .teaser_item.partner .teaser_image {
	grid-column: 1 / 3;
	grid-row: 1 / 4;
	width: auto;
	height: auto;
	min-width: 50px;
	min-height: 50px;
	max-width: 150px;
	max-height: 150px;
	background-color: var(--white);
}

div.teaser.small .teaser_item .teaser_image {
	width: 35px;
	height: 35px;
}

div.teaser a .teaser_image {
	transition: border 100ms linear;
}

div.teaser .teaser_item .teaser_title {
	margin: 0 0 0.3em 0;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-weight: var(--font-weight-l);
	line-height: 1rem;
	hyphens: none;
}

div.teaser.small .teaser_item .teaser_title {
	font-weight: var(--font-weight-m);
	line-height: 1rem;
}

div.teaser .teaser_item .teaser_meta div {
	display: inline-block;
	white-space: nowrap;
	font-size: var(--font-s);
	font-weight: var(--font-weight-m);
	letter-spacing: -0.0em;
	max-width: 11em;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--cyan);
	color: var(--white);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0.1em 0.3em;
}

div.teaser .teaser_item .teaser_meta {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	line-height: 0.9em;
	margin-left: -0.2em;
}

div.teaser .teaser_item .teaser_meta div.teaser_parent {
	color: var(--black);
	background-color: #fff;
}

div.teaser .teaser_item .teaser_meta div.teaser_template {
	color: var(--black);
	background-color: var(--black-superlight);
	_outline: 1px solid #00000025;
	_outline-offset: -1px;
}

div.teaser .teaser_item a:hover .teaser_image {
	border-color: var(--yellow);
	_transform: rotateZ(2deg);
}

div.teaser .teaser_item.partner a:hover .teaser_image,
div.teaser.hero .teaser_item a:hover .teaser_image,
div.teaser.stripe .teaser_item a:hover .teaser_image {
	border-color: var(--white);
}

div.teaser.medium .teaser_item .teaser_meta {
	grid-row: 2 / 4;
}

.teaser_title_extra {
	display: inline;
	white-space: nowrap;
	font-size: 0.8em;
	_font-weight: 400;
	letter-spacing: -0.0em;
	color: var(--black-light);
}

@media (max-width: 899px) {
	.teaser_title_extra {
		white-space: normal;
	}
}

div.teaser.small .teaser_item .teaser_title .teaser_date {
	display: none;
}

div.teaser .teaser_item .teaser_text {
	font-weight: 400;
	font-size: var(--font-m);
	line-height: 1.25;
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}

div.teaser.large .teaser_item .teaser_meta {
	grid-row: 3 / 4;
	margin-top: 0.2em;
}

div.teaser.large .teaser_item .teaser_text {
	grid-row: 2 / 3;
}

div.teaser.xlarge {
	row-gap: var(--space-l);
}

div.teaser.xlarge .teaser_item a {
	grid-template-columns: 140px auto;
}


div.teaser.hero .teaser_item.project .teaser_meta,
div.teaser.stripe .teaser_item.project .teaser_meta,
div.teaser.xlarge .teaser_item.project .teaser_meta {
	display: none;
}

div.teaser.xlarge .teaser_item.project .teaser_text {
	grid-row: 2 / 3;
}

div.teaser.hero .teaser_item.project .teaser_text,
div.teaser.stripe .teaser_item.project .teaser_text {
	grid-row: 3 / 5;
}

div.teaser.xlarge .teaser_item .teaser_image {
	width: 140px;
	height: 140px;
}

#main #hero {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 1fr);
	place-items: stretch stretch;
	height: 400px;
	margin: var(--space-l) 0 var(--space-l) 0;
}

#main #hero .hero-teaser {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	background-color: var(--white-light);
	padding: var(--space-m) var(--space-m);
}

@media (max-width: 899px) {
	body.person #main #hero .hero-teaser {
		grid-column: 1 / 3;
		padding: var(--space-xs) var(--space-s);
	}
	body.person #main #hero .hero-background {
		_display: none;
	}
	body.person #main #hero .hero-teaser p {
		_font-size: var(--font-m);
	}
}

#main #hero .hero-teaser h1 {
	margin: 0 0 var(--space-s) 0;
	font-size: var(--font-xl);
	line-height: 1.25;
}

#main #hero .hero-teaser p {
	font-size: var(--font-l);
	line-height: 1.25;
	margin: 0;
}

#main #hero:not(.image-narrow) .hero-background, body.partner #main #hero .hero-background {
	display: none;
}

@media (max-width: 899px) {
	body #main #hero .hero-background {
		_display: none;
	}
}

#main #hero .hero-background {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	z-index: -2;
	height: 400px;
	overflow: hidden;
	background-color: var(--black-mediumlight);
}

#main #hero .hero-background img {
	filter: brightness(150%) saturate(70%) blur(20px);
}

#main #hero .hero-image {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	z-index: -1;
	height: 400px;
}

#main #hero.image-narrow .hero-image {
	grid-column: 1 / 2;
}

@media (max-width: 899px) {
	#main #hero.image-narrow .hero-image {
		grid-column: 1 / 3;
	}
}

#main #hero .hero-background img, #main #hero:not(.image-narrow) .hero-image img {
	height: 400px;
	width: 100%;
	object-fit: cover;
}

#main #hero.image-narrow .hero-background img {
	height: 400px;
}


#main #hero.image-narrow .hero-image {
	display: grid;
	align-items: end;
	justify-items: start;
}

body.partner #main #hero.image-narrow .hero-image {
	display: grid;
	align-items: center;
	justify-items: center;
}

#main #hero.image-narrow .hero-image img {
	object-fit: cover;
	width: 390px;
	height: 390px;
	max-width: 100%;
	margin-left: 10px;
}

@media (max-width: 899px) {
	#main #hero.image-narrow .hero-image img {
		width: 400px;
		height: 400px;
		margin: 0;
	}
}

body.partner #main #hero.image-narrow .hero-image img {
	object-fit: contain;
	margin: 0;
}

#main #hero.image-missing, #main #hero.image-missing .hero-image, #main #hero.image-missing .hero-background {
	height: auto;
}
#main #hero.image-missing .hero-teaser {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	padding: 0;
}

#main #hero.image-missing .hero-teaser h1 {
	font-size: revert;
}

#main div.teaser.hero,
#main div.teaser.stripe {
	grid-template-columns: 1fr;
	_margin: var(--space-m) 0.4em var(--space-l) 0.4em;
	margin: var(--space-m) 0 var(--space-l) 0;
}

div.teaser.hero .teaser_item a,
div.teaser.stripe .teaser_item a {
	grid-template-columns: 1fr minmax(300px, 1fr);
	place-items: stretch stretch;
	padding: 0;
	gap: 0;
}

div.teaser.hero .teaser_item .teaser_title,
div.teaser.stripe .teaser_item .teaser_title {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	background-color: var(--white-light);
	padding: var(--space-m) var(--space-s) 0 var(--space-m);
	margin: var(--space-l) 0 0 0;
}
div.teaser.hero .teaser_item .teaser_meta,
div.teaser.stripe .teaser_item .teaser_meta {
	grid-column: 2 / 3;
	grid-row: 4 / 5;
	background-color: var(--white-light);
	padding: var(--space-xs) 0 var(--space-m) var(--space-m);
	margin: 0;
	width: 100%;
}

div.teaser.hero .teaser_item .teaser_meta div:nth-of-type(1),
div.teaser.stripe .teaser_item .teaser_meta div:nth-of-type(1) {
	margin-left: -0.2em;
}

div.teaser.hero .teaser_item .teaser_text,
div.teaser.stripe .teaser_item .teaser_text {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	background-color: var(--white-light);
	padding: var(--space-xs) var(--space-s) 0 var(--space-m);
	margin: 0;
}

div.teaser.hero .teaser_item .teaser_image {
	width: 100%;
	height: 400px;
	grid-column: 1 / 3;
	grid-row: 1 / 5;
	z-index: -1;
	background-color: transparent;
}

div.teaser.hero .teaser_item .teaser_image img {
	width: 100%;
	height: 400px;
	object-position: 50% 50%;
	object-fit: cover;
}

div.teaser.stripe .teaser_item .teaser_image {
	width: 100%;
	height: 250px;
	grid-column: 1 / 3;
	grid-row: 1 / 5;
	z-index: -1;
	background-color: transparent;
}

div.teaser.stripe .teaser_item .teaser_image img {
	width: 100%;
	height: 250px;
	object-position: 50% 50%;
	object-fit: cover;
}

body.project #content .teaser_meta div.teaser_template,
body.project #content .teaser_meta div.teaser_parent,
body.project_overview #content .teaser_meta div.teaser_template,
body.project_overview #content .teaser_meta div.teaser_parent {
	display: none;
}

#project_subprojects_expander, #content > div.teaser {
	margin: var(--space-m) 0;
}

.expander_navigation ul li a {
	margin: 0em -0.4em;
	padding: 0em 0.4em;
	border-radius: var(--marker-border);
	background: transparent;
	transition: border-radius var(--transition);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-decoration: none;
}

.expander_navigation ul li.current > a,.expander_navigation ul li:not(.current) > a:hover {
	background-image: var(--marker-yellow);
}

.expander_navigation ul {
	padding: 0;
	margin: 0;
}

.expander_navigation ul li {
	list-style-type: none;
	margin-bottom: 2px;
	display: inline;
	padding-right: var(--space-s);
}

.expander_footer {
	text-align: center;
	margin-top: 10px;
	font-size: var(--font-s);
}

.expander_footer a {
	margin: 0em -0.4em;
	padding: 0em 0.4em;
	border-radius: var(--marker-border);
	background: transparent;
	transition: border-radius var(--transition);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-decoration: none;
}

.expander_footer a:hover {
	background-image: var(--marker-yellow);
}

#aside {
	width: 350px;
	_width: calc(50% - var(--space-l)); /* todo: adapt to 1/2 hero */
	float: right;
	margin: 0 0 var(--space-s) var(--space-m);
	padding: 0 var(--space-m) var(--space-s) var(--space-m);
	background-color: var(--cyan-superlight);
	outline: var(--space-xs) solid white;
	_background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.02), rgba(119, 192, 195, 0.05));
	_box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.02);
}

_body.home #aside {
	width: auto;
	float: none;
	margin: var(--space-m) 0;
	padding: 1px var(--space-m) var(--space-m) var(--space-m);
}

#aside h2 {
	_background-color: var(--white);
    _margin: -1px -20px var(--space-m) -20px;
    _padding: 1px 0 0 0;
	margin: var(--space-m) 0 var(--space-s) 0;
	_margin: var(--space-s) 0 -5px 0; /* with term below h2 */
    font-size: var(--font-xxl);
	font-weight: var(--font-weight-xl);
	color: var(--cyan);
	_text-align: center;
	_border-bottom: 5px solid var(--cyan);
}

@media (max-width: 1100px) {
	#aside {
		width: auto;
		float: none;
		margin: var(--space-m) 0;
		padding: 1px var(--space-m) var(--space-m) var(--space-m);
		background-color: var(--cyan-superlight);
	}
}

#filter h2 {
	margin: var(--space-s) 0 var(--space-xs) 0;
}

ul.tags {
	_text-align: center;
	padding: var(--space-xs);
    margin-bottom: var(--space-l);
    list-style-type: none;
	background-color: var(--cyan-superlight);
	_background-color: white;
}

body.label ul.tags, body.category_overview ul.tags {
	margin: 0;
	_background-color: white;
}

ul.tags li {
	display: inline;
	list-style-type: none;
	background: none;
}

ul.tags li {
    font-size: var(--font-m);
	line-height: 1.6;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
    _background-color: var(--cyan);
    color: var(--black);
    padding: 0 var(--space-xs);
}

ul.tags li:hover, ul.tags li.current {
   opacity: 1 !important;
   transition: opacity var(--transition);
}

ul.tags li .childs {
	opacity: 0.5;
}

#content > .term {
	background-color: var(--page-color);
    padding: 0 2px;
}

#aside .term {
	font-size: var(--font-s);
}

#aside .teaser {
	margin: var(--space-s) 0 0 0;
}

#aside h2:not(:nth-of-type(1)) {
	border-top: 1px solid var(--cyan-light);
	padding-top: var(--space-m);
}

blockquote_::after {
	content: close-quote;
	font-size: 2em;
	font-weight: var(--font-weight-l);
}

ul.tags li.teaser_template {
	background-color: var(--black-superlight);
}

ul.tags li a {
	text-decoration: none;
}

body.category_overview ul.tags li.children-0, body.label ul.tags li.children-0, body.home #content ul.tags li.children-0, body.home #content ul.tags li.children-1 {
	display: none;
}

body.home #content ul.tags li {
	padding: 0 var(--space-xs);
}

ul.tags li.current, ul.tags li:hover {
    background-color: var(--yellow) !important;
}

#content p.event_datetime_range, #content p.event_datetime_warning {
	padding: var(--space-s);
    margin-bottom: var(--space-l);
	background-color: #C7E6E92B;
	font-weight: 600;
}

#content p.event_datetime_warning {
	background-color: #e7212118;
}

form#publication-filter-template-select select {
	width: 100%;
}

form.search {
	margin: var(--space-l) 0;
	display: grid;
	gap: var(--space-xs);
	grid-template-columns: 1fr 150px;
	justify-items: stretch;
	align-items: stretch;
	font-size: var(--font-l);
}

@media (max-width: 899px) {
	form.search {
		grid-template-columns: none;
		grid-template-rows: 50px;
	}
}

form.search input#search, #content form.search button {
	font-size: var(--font-l);
	margin: 0;
	padding: var(--space-s);
}
#content form.search button {
	margin: -2px 0;
}

#content ul.MarkupPagerNav {
	text-align: right;
}

#content ul.MarkupPagerNav li {
	display: inline-block;
	list-style-type: none;
	background-image: none;
	margin: 0;
	padding: 0;
}

#content ul.MarkupPagerNav li.MarkupPagerNavOn a {
	background-color: var(--cyan-light);
}

#content .richtext {
	_columns: 370px 2;
	column-gap: var(--space-m);
	font-size: var(--font-l);
}
#content .richtext h2, #content .richtext hr, #content .richtext .TextformatterVideoEmbed {
	column-span:all;
}

h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-s) 0;
	break-after: avoid;
}

.richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6,
#content > .body > .person {
	margin-top: 1.5em;
	break-after: avoid;
}

#content > h2 {
	margin: var(--space-l) 0 var(--space-m) 0;
	_text-align: center;
	font-size: 1.725rem;
}

#content p {
	margin: 0 0 var(--space-s) 0;
	_break-inside: avoid;
	orphans : 2;
	widows: 3;
	text-align: left;
}

#content ol, #content ul {
	margin: var(--space-m) var(--space-l) var(--space-m) var(--space-m);
	padding: 0;
	orphans : 5;
	widows: 5;
	hyphens: none;
	_line-height: 1.2;
}

#content ul {
	list-style-position: inside;
}

#content li {
	margin: var(--space-xs) var(--space-s);
	break-inside: avoid;
}

#content ul li {
	list-style-type: none;
	background-image: url('../img/circle-solid.svg');
	background-repeat: no-repeat;
	background-position: Left 10px;
	background-size: 5px;
	padding: 0 0 0 15px;
	margin-left: -5px;
}

#content table {
	border-collapse: collapse;
	min-width: 320px;
	margin: var(--space-m) 0;
}

#content thead {
	background-color: var(--black-mediumlight);
	font-weight: var(--font-weight-l);
}

#content thead th {
	text-align: left;
	padding: 0 0.5em 0 0.2em;
}

#content td {
	padding: 2px 10px 2px 5px;
	border-bottom: 1px solid var(--black-mediumlight);
}


#__content h2 + p::first-letter {
	color: var(--cyan);
	font-size: 5.5em;
	font-style: italic;
	font-weight: var(--font-weight-m);
	padding: 6px 3px;
	margin-right: 6px;
	float: left;
  }

#content hr {
	border: 0;
    height: 1px;
	margin: var(--space-l) var(--space-xl);
    background: var(--cyan-light);
}

/* "auto" <HR /> above meta information */
#_content > h2:first-of-type {
	border-top: 1px solid var(--cyan-light);
	padding-top: var(--space-l);
	margin-top: var(--space-xl);
}

_#content > h2:first-of-type::before {
	content: '';
	display: block;
    height: 0;
	margin: var(--space-l) auto;
	border-bottom: dotted 7px var(--page-color);
	width: 60px;
	background: #fff;
	_transform: rotateZ(90deg);
}

_#content > h2:first-of-type::before {
	content: 'Share';
	border-bottom: dotted 30px var(--page-color);
	width: 300px;
	_transform: rotateZ(90deg);
}

#content .richtext hr {
    height: 0;
	margin: var(--space-l) auto;
	border-bottom: dotted 7px var(--cyan-light);
	width: 60px;
	background: #fff;
	_transform: rotateZ(90deg);
}

#content blockquote, q {
	text-indent: -1em;
	line-height: 1em;
	font-style: italic;
	color: var(--black-light);
	font-size: var(--font-l);
	font-weight: var(--font-weight-m);
	width: 80%;
	break-inside: avoid;

}

blockquote::before {
	content: open-quote;
	font-size: 2em;
	font-weight: var(--font-weight-l);
}

blockquote_::after {
	content: close-quote;
	font-size: 2em;
	font-weight: var(--font-weight-l);
}

#content blockquote p {
	display: inline;
}

#content div.project-outcomes, #content  div.meta {
	background-color: var(--page-color);
	padding: var(--space-m) var(--space-m);
	margin: var(--space-l) 0;
	background-repeat: no-repeat;
	break-inside: avoid;
	text-align: left;
	font-size: var(--font-m);
	
}

#content div.project-outcomes {
	background-color: var(--cyan-superlight);
}

#content div.project-outcomes h2 {
	color: var(--cyan);
}

.meta-issnisbn, .meta-tags {
	display: none;
}

div.project-outcomes h2 {
	_display: none;
}

#content div.meta ul.tags, #content div.meta ul li {
	display: inline;
	list-style-type: none;
	background-image: none;
	background-color: transparent;
	padding: 0;
	margin: 0;
}

#main > ul.tags {
	
}

_#content div.files a.cta, #content  div.supplier a.cta {
	_background-color: var(--black-mediumlight);
	_border-color: transparent;
	_color: var(--black-ish);
}

p.box, form.box {
	color: var(--black-ish);
	padding: var(--space-s) var(--space-m);
	border-radius: 3px;
}

div.project-outcomes  ~  div.meta {
	margin-top: var(--space-m);
}

div.files, div.supplier {
	display: inline;
}

.block > div.files, .block > div.supplier {
	margin-top: var(--space-l);
	display: block;
}

margin: var(--space-l) 0;

#content p.avoid-break {
	break-inside: avoid;
}

#content p.span-all {
	column-span: all;
	margin-left: auto;
	margin-right: auto;
}

#content small {
	font-size: var(--font-s);
}

form.enable-analytics {
	margin-bottom: var(--space-m);
	_font-size: var(--font-m);
	border: 1px solid #0000000a;
	padding: var(--space-s) var(--space-m) var(--space-m) var(--space-m);
}

form button, form select {
	font-family: 'Source Sans 3 VF', sans-serif;
	cursor: pointer;
	background-color: #fff0;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

/**
	Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
	SVG encoder: https://yoksel.github.io/url-encoder/
**/

#content p.warning {
	background-color: rgba(255, 84, 0, 0.11);
	color: red;
	_background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E %3Cpath fill='red' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
}

p.notice, form.notice {
	background-color: rgba(255, 239, 0, 0.25);
	color: rgba(0, 0, 0, 0.74);
	_background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath fill='%2341424C' d='M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z'/%3E%3C/svg%3E");
}

#content p.map-marker {
	_background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E %3Cpath fill='%2341424C' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E");
}

div.contact {
	margin: var(--space-l) 0 var(--space-m) 0; /* change space-l back to space-m if we readd the <h2> above .contact */
	display: grid;
	row-gap: var(--space-m);
	column-gap: var(--space-xs);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: center;
	justify-items: center;
}

div.contact .contact-item a {
	opacity: 0.7;
	display: block;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 20px;
	min-height: 10px;
	min-width: 50px;
	padding: 0 0 0 25px;

	_background-image: url(/site/templates/images/fa/svgs/solid/phone.svg);
	_transition: transform var(--transition);
	transition: opacity var(--transition);
}

div.contact .contact-item a:hover {
	opacity: 1;
	_transform: rotateZ(2deg);
}

div.contact .contact-item.www a {background-image: url(/site/templates/images/fa/svgs/solid/globe.svg);}
div.contact .contact-item.phone a {background-image: url(/site/templates/images/fa/svgs/solid/phone.svg);}
div.contact .contact-item.mail a {background-image: url(/site/templates/images/fa/svgs/solid/envelope-open.svg);}
div.contact .contact-item.fax a {background-image: url(/site/templates/images/fa/svgs/solid/print.svg);}
div.contact .contact-item.twitter a {background-image: url(/site/templates/images/fa/svgs/brands/twitter.svg);}
div.contact .contact-item.linkedIn a {background-image: url(/site/templates/images/fa/svgs/brands/linkedin.svg);}
div.contact .contact-item.instagram a {background-image: url(/site/templates/images/fa/svgs/brands/instagram.svg);}
div.contact .contact-item.facebook a {background-image: url(/site/templates/images/fa/svgs/brands/facebook.svg);}

span.marker {
	margin: 0em -0.2em;
	padding: 0em 0.2em;
	border-radius: var(--marker-border);
	background-image: var(--marker-yellow);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

small {
	font-size: var(--font-s);
}

#content .cta, #aside .cta, #content ul.MarkupPagerNav li a {
	transition: border 100ms linear;
	display: inline-block;
	background-color: var(--cyan);
	border: 2px solid #ffffff;
	border-radius: 0px;
	color: #FFF;
	text-decoration: none;
	font-weight: var(--font-weight-m);
	padding: 0.4em 0.6em;
	margin: var(--space-xs) 0;
	cursor: pointer;
	font-size: var(--font-l);
}

#aside .cta {
	border-color: var(--cyan-superlight);
}

#content .cta.cta-large {
	text-align: center;
	max-width: 300px;
	display: block;
	margin: var(--space-l) auto;
	padding: var(--space-s) var(--space-l);
}

#content .files a.cta, #content .supplier a.cta {
	padding: 0.4em 0.6em 0em 0.6em;
}
#content a.cta .file-description {
	display: inline-block;
	_white-space: nowrap;
	_max-width: 20rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

#content a.cta .file-description-extension {
	font-weight: var(--font-weight-s);
}

#content a.cta:visited {
	color: #fff;
}

#content .cta:hover, #aside .cta:hover, #content ul.MarkupPagerNav li a:hover {
	border-color:var(--yellow);
	text-decoration: none;
}

_body.home #teaser {
	margin: 0;
}

_body.home #content .body .richtext p {
	font-size: var(--font-xl);
	line-height: 1.1em;
	margin-top: var(--space-s);
}

@media (min-width: 900px) {
	body.home #content > h2,
	body.press_overview #content > h2,
	body.home #content .home-topics {
		margin-top: var(--space-xl);
	}
	body.home h1 {
		margin-top: 0;
	}
}

body.home #content .home-topics {
	margin: initial 0 0 0;
	padding-bottom: var(--space-xs);
}

body.home #content .home-topics .cta {
	margin: var(--space-l) auto var(--space-m) auto;
}


/* image gallery */

.splide {
	width: 1010px;
	margin: var(--space-m) var(--space-l) var(--space-m) var(--space-m);
}

.splide li {
	list-style-type: none !important;
	background-image: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.splide__list {
    height: auto;
}

.splide li.splide__slide {
    width: 80%;
    margin-right: 1em !important;
}

.splide__slide img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.splide__slide p {
    font-size: 16px;
    line-height: 20px !important;
    margin-top: 1rem !important;
}

.splide__arrow {
    background: #fff;
    color: #000;
    backdrop-filter: blur(10px);
    width: 40px;
    height: 40px;
    top: 165px;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 50%;
    transition: opacity 0.2s ease-in;
}

.splide__arrow svg {
    fill: #6ebcbf;
    width: 20px;
    height: auto;
}

.splide__pagination {
    display: flex !important;
    position: static;
    justify-content: center;
    margin-top: 0 !important;
}

.splide__pagination li {
	margin: 0 !important;
}

.splide__pagination__page {
    width: 18px;
    height: 8px;
    background: #c5e4e5;
    border-radius: 4px;
    transition: background-color 0.2s ease-in;
}

.splide__pagination__page:hover {
    background: #6ebcbf;
}

.splide__pagination__page.is-active {
    background: #6ebcbf;
}

.splide__arrow-gradient {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, white 70%);
    z-index: 1;
    pointer-events: none;
}

.splide__arrow-gradient--left {
    left: 0;
}

.splide__arrow-gradient--right {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 70%);
}