@charset "UTF-8";

/* Setup */
:root {
	--color-background: white;
	--color-text: #222222;
	--color-darkblue: #0f295b;
	--color-lightblue: #86d4e5;
	--color-green: #9E9731;
	--color-lightgreen: #9ACA8F;
	--font-family: "EB Garamond", sans-serif;
	--font-family-display: "IBM Plex Sans", sans-serif;
	--font-size: 1rem;
	--line-height: 1.40em;
	--letter-spacing: -0.01em;
	--word-spacing: -0.01em;
	--letter-spacing-bold: 0.0175em;
	--letter-spacing-headline: 0em;
	--spacer-h: 4.5em;
	--spacer-v: 2em;
}

/* Fonts */
@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/eb-garamond-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/eb-garamond-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-300-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fixes */
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-color: var(--background-color);
	margin: 0;
	padding: 0;
}
img, picture {
	border-style: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
a { 
	outline: none !important;
}
figure, 
nav, 
section {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Generic elements */
html {
	scroll-behavior: smooth;
	scroll-padding: var(--spacer-h) 0 0 0;
}
body {
	margin: 0;
	padding: 0;
	background-color: var(--color-darkblue);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-feature-settings: "kern" 1, "liga" 1;
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	word-spacing: var(--word-spacing);
	text-align: left;
	text-rendering: geometricPrecision;
	text-rendering: optimizeLegibility;
}
h1, 
h2, 
h3, 
h4, 
h5 {
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0.7em 0;
}
h1, 
h2, 
h3, 
h4, 
h5 {
	letter-spacing: var(--letter-spacing-headline);
	font-family: var(--font-family-display);
	color: var(--color-darkblue);
}
a, 
strong{
	letter-spacing: var(--letter-spacing-bold);
}
a, 
a:link, 
a:visited, 
a:hover, 
a:active {
	text-decoration: none;
	color: var(--color-darkblue);
	font-weight: bold;
}
a:hover {
	color: var(--color-text);
}

/* Grid layout */
body > * {
	display: grid;
	grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 0fr;
	grid-gap: 0 var(--spacer-v);
	margin: 0 auto;
}

/* Header */
header#bar {
	grid-template-rows: 4.5em;
	background-color: var(--color-darkblue);
	color: var(--color-background);
	font-family: var(--font-family-display);
	top: 0;
	border-bottom: 2px solid var(--color-lightblue);
	position: sticky;
	z-index: 100;
}
header#bar figure#logo {
	grid-column: 2 / span 3;
	align-self: center;
	text-align: left;
}
header#bar figure#logo img {
	height: 2.5em;
	width: auto;
}
header#bar nav {
	grid-column: 5 / span 3;
	text-align: right;
	align-self: end;
}
header#bar nav ul {
	margin: 0;
	padding: 0;
}
header#bar nav ul li {
	display: inline-block;
	list-style-type: none;
	position: relative;
	margin: 0 0 0 var(--spacer-v);
	height: 2.9em;
}
header#bar nav ul li a {
	color: var(--color-background);
}
header#bar nav ul li#current a {
	color: var(--color-lightblue);
}
header#bar nav ul li.language a {
	color: var(--color-green);
	font-weight: 400;
}
header#bar nav ul li.language a:before {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-right: 0.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239E9731' d='M4.1 11.1c.32 1.98.86 3.5 1.61 4.58a8.14 8.14 0 01-5.1-4.58H4.1zm7.8 0h3.49a8.14 8.14 0 01-5.1 4.58c.77-1.08 1.31-2.6 1.61-4.58m-1.06 0a10.6 10.6 0 01-1.13 3.55C9.19 15.55 8.62 16 8 16c-.62 0-1.2-.45-1.7-1.35s-.9-2.09-1.14-3.55h5.68zm-6.87-1.04H.29C.1 9.36 0 8.66 0 8c0-.67.1-1.35.3-2.06h3.67a22.63 22.63 0 000 4.12M16 8c0 .69-.1 1.38-.29 2.06h-3.68a23 23 0 000-4.12h3.68c.2.68.29 1.37.29 2.06M4.1 4.9H.6A8.17 8.17 0 015.71.32 10.57 10.57 0 004.1 4.9m7.8 0c-.32-1.98-.86-3.5-1.61-4.58a8.23 8.23 0 015.1 4.58H11.9zM5 5.94h6a22.27 22.27 0 010 4.12H5a22.26 22.26 0 010-4.12m.16-1.04c.24-1.46.61-2.64 1.13-3.55C6.81.45 7.38 0 8 0c.62 0 1.2.45 1.71 1.35.52.9.9 2.09 1.16 3.55h-5.7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 100% 100%;
}
header#bar nav ul li#current:after{
	position: absolute;
	bottom: 0;
	height: 0;
	width: 0;
	left: calc(50% - 0.8em);
	border: .8em solid transparent;
	border-bottom-color: var(--color-lightblue);
	content: "";
}

/* Teaser */
figure.banner {
	background: white;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='200' preserveAspectRatio='none'%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='46.7' y1='280.9' x2='673.3' y2='-80.9'%3E%3Cstop offset='0' stop-color='%230f295b'/%3E%3Cstop offset='.1' stop-color='%23344a74'/%3E%3Cstop offset='.2' stop-color='%23697999'/%3E%3Cstop offset='.3' stop-color='%2397a2b8'/%3E%3Cstop offset='.5' stop-color='%23bdc4d2'/%3E%3Cstop offset='.6' stop-color='%23dadee5'/%3E%3Cstop offset='.7' stop-color='%23eef0f4'/%3E%3Cstop offset='.9' stop-color='%23fbfbfc'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M0 0h720v200H0z'/%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='-.9' y1='196.7' x2='720.9' y2='3.3'%3E%3Cstop offset='0' stop-color='%238e8c13' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238e8c13'/%3E%3C/linearGradient%3E%3Cpath opacity='.8' fill='url(%23b)' d='M0 0h720v200H0z'/%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='360' y1='200' x2='360' y2='0'%3E%3Cstop offset='0' stop-color='%2386d4e5' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%2386d4e5'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23c)' d='M0 0h720v200H0z'/%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='-.9' y1='196.7' x2='720.9' y2='3.3'%3E%3Cstop offset='0' stop-color='%23f6fcfd'/%3E%3Cstop offset='0' stop-color='%23f3fbfc'/%3E%3Cstop offset='.2' stop-color='%23ccedf4' stop-opacity='.8'/%3E%3Cstop offset='.4' stop-color='%23ade2ed' stop-opacity='.6'/%3E%3Cstop offset='.6' stop-color='%2398dae9' stop-opacity='.4'/%3E%3Cstop offset='.8' stop-color='%238ad6e6' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%2386d4e5' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath opacity='.9' fill='url(%23d)' d='M0 0h720v200H0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom left;
	padding-top: calc(var(--spacer-v) * 2);
	margin-top: -1px; /* chrome fix */
}
figure.banner div.inner {
	grid-column: 2 / span 7;
	min-height: 33vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='340'%3E%3Cpath fill='%23FFF' d='M2.2 5l180.6 165L2.2 335V5M0 0v340l186-170L0 0zM496.1 5l180.7 165L496 335V5M494 0v340L680 170 494 0z'/%3E%3Cpath fill='%23FFF' d='M348 5l180.6 165-180.7 165V5m-2.1-5v340l186-170-186-170z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 100% 100%;
	font-family: var(--font-family-display);
	font-size: 1.2em;
	line-height: 1.4em;
	padding-bottom: var(--spacer-v);
	box-sizing: border-box;
}
figure.banner div.inner span.headline {
	font-size: 2.6em;
	line-height: 1.2em;
	font-weight: 300;
}
figure.banner div.inner ul {
	list-style: none;
	margin: 1.4em 0.1em;
	padding: 0;
}
figure.banner div.inner ul li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='29'%3E%3Cpath fill='%2392D8E8' d='M0 0v29l16-14.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: auto 1.3em;
	padding-left: 1.2em;
	margin: .15em 0;
}
figure.banner div.inner ul li:nth-child(2n) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='29'%3E%3Cpath fill='%239E9731' d='M0 0v29l16-14.5z'/%3E%3C/svg%3E");
}
figure.banner div.inner ul li:nth-child(3n) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='29'%3E%3Cpath fill='%239CC98C' d='M0 0v29l16-14.5z'/%3E%3C/svg%3E");
}


/* Articles */
article {
	padding: var(--spacer-h) 0;
	position: relative;
	background-color: var(--color-background);
}
article + article:before {
	position: absolute;
	top: 0em;
	height: 0;
	width: 0;
	left: 37.5%;
	height: 2px;
	width: 25%;
	background-color: var(--color-lightblue);
	content: "";
	z-index: 5;
}
article header {
	grid-row: 1 / span 1;
	grid-column: 3 / span 4;
	text-align: center;
}
article header h1 {
	font-size: 1.8em;
}
article div.content {
	grid-row: 2 / span 1;
	grid-column: 3 / span 4;
	font-size: 1.2em;
	line-height: 1.35em;
	letter-spacing: 0;
}
/* image aside */
article.featured_image_left div.content {
	grid-row: 2 / span 1;
	grid-column: 5 / span 3;
}
article.featured_image_left figure.featured_image {
	grid-row: 2 / span 1;
	grid-column: 2 / span 3;
}
article.featured_image_right div.content {
	grid-row: 2 / span 1;
	grid-column: 2 / span 3;
}
article.featured_image_right figure.featured_image {
	grid-row: 2 / span 1;
	grid-column: 5 / span 3;
}
/* image as header */
article.featured_image_header header {
	grid-row: 2 / span 1;
}
article.featured_image_header div.content {
	grid-row: 3 / span 1;
}
article.featured_image_header figure.featured_image {
	grid-row: 1 / span 1;
	grid-column: 3 / span 4;
	padding-bottom: 1em;
}
article.featured_image_left figure.featured_image {
	padding-right: 3em;
}
/* general image */
article figure.featured_image img {
	width: 100%;
	margin-top: 1.4em;
}
article div.content ul {
	list-style: none;
	margin: 1em 0 1em 0;
	padding-left: 1em;
}
article div.content ul li:before {
	display: inline-block;
	content: "\2013";
	width: 1em;
	margin-left: -1em;
}
article div.content > ul > li:before {
	content: "\2022";
}
article div.content ul li ul {
	margin: 0;
}

/* Footer */
footer {
	background-color: var(--color-darkblue);
	color: var(--color-background);
	font-family: var(--font-family-display);
	padding: var(--spacer-v) 0;
}
footer nav#footer_firstnav {
	grid-column: 2 / span 1;
}
footer nav#footer_secondnav {
	grid-column: 3 / span 1;
}
footer nav#social {
	grid-column: 5 / span 3;
}
footer nav ul {
	margin: 0;
	padding: 0;
}
footer nav ul li {
	list-style-type: none;
	margin: 0;
}
footer nav ul li a {
	color: var(--color-lightblue) !important;
}
footer nav ul li a:hover {
	color: var(--color-background) !important;
}
footer nav#social {
	text-align: right;
}
footer nav#social ul li {
	display: inline;
	margin-left: calc(var(--spacer-v) / 2);
}
footer nav#social ul li img {
	width: 3em;
	height: auto;
}

@media (min-width: 1921px)  {
	/*body > * {
		display: grid;
		grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 0fr;
	}*/
}

/* Mobile */
@media (max-width: 960px)  {
	:root {
		--spacer-h: 1.7em;
		--spacer-v: 1.4em;
	}
	html {
		scroll-padding: 6em 0 0 0;
	}
	header#bar {
		grid-template-rows: 4em;
	}
	header#bar figure#logo {
		grid-row: 1 / span 1;
		grid-column: 2 / span 6;
		text-align: center;
	}
	header#bar figure#logo img {
		width: 100%;
		height: auto;
		max-height: 2.5em;
	}
	header#bar nav {
		grid-row: 2 / span 1;
		grid-column: 1 / span 8;
		text-align: center;
	}
	header#bar nav ul li {
		margin: 0 0.5em 0 0.5em;
		height: 2.5em;
	}
	figure.banner {
		padding-top: var(--spacer-h);
	}
	figure.banner div.inner {
		min-height: 0;
		padding-bottom: var(--spacer-v);
	}
	figure.banner div.inner span.headline {
		font-size: 1.8em;
	}
	figure.banner div.inner ul {
		margin: var(--spacer-v) 0;
	}
	article header {
		grid-column: 2 / span 6;
	}
	article div.content, article.featured_image_left figure.featured_image, article.featured_image_right figure.featured_image  {
		grid-row: 2 / span 1;
		grid-column: 2 / span 6;
	}
	article.featured_image_left div.content, article.featured_image_right div.content {
		grid-row: 3 / span 1;
		grid-column: 2 / span 6;
	}
	article.featured_image_header figure.featured_image {
		grid-column: 2 / span 6;
	}
	footer nav#footer_firstnav {
		grid-row: 1 / span 1;
		grid-column: 2 / span 3;
	}
	article.featured_image_left figure.featured_image {
		padding-right: 0;
	}
	footer nav#footer_secondnav {
		grid-row: 2 / span 1;
		grid-column: 2 / span 6;
		padding-top: var(--spacer-v);
	}
	footer nav#social {
		grid-row: 1 / span 1;
		grid-column: 5 / span 3;
	}
}

@media (max-width: 480px)  {
	:root {
		--spacer-h: 2.5em;
		--spacer-v: 1.2em;
	}
}

/* Fancy additional effects */
::selection {
	background: var(--color-darkblue);
	color: var(--color-background);
}

/*::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 4px;
}
::-webkit-scrollbar-thumb {
	background: rgb(119, 134, 142);
	border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
	background: rgb(41, 65, 78);
}
::-webkit-scrollbar-track {
	background: transparent;
}
@media (prefers-color-scheme: dark) {
	::-webkit-scrollbar {
		width: 5px;
	}
	::-webkit-scrollbar-thumb {
		background: rgb(139, 161, 172);
		border-radius: 0;
	}
	::-webkit-scrollbar-thumb:hover {
		background: rgb(217, 236, 246);
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
}*/