:root {
	--green: #080;
	--white: #fff;
	--text: #2c2c2c;
	--wrap: 6%;
}

@font-face {
	font-family: 'questasans';
	src: url('../fonts/questasans_bold.woff2') format('woff2'),
		 url('../fonts/questasans_bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'questasans';
	src: url('../fonts/questasans_bold_italic.woff2') format('woff2'),
		 url('../fonts/questasans_bold_italic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'questasans';
	src: url('../fonts/questasans_regular_italic.woff2') format('woff2'),
		 url('../fonts/questasans_regular_italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'questasans';
	src: url('../fonts/questasans_regular.woff2') format('woff2'),
		 url('../fonts/questasans_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: normal;
	box-sizing: border-box;
	list-style: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 0;
}

body {
	font-family: "questasans", sans-serif;
	line-height: 1.4;
	background: #fff;
	color: var(--text);
	-webkit-text-size-adjust: 100%;
	font-size: 1.0625rem; /* 17/16 */

	@media only screen and (min-width: 37.5em) { /* 600px */
		font-size: 1.25rem; /* 20/16 */
	}
}

a {
	color: var(--green);
	text-decoration: none;

	&:focus,
	&:hover,
	&:active {
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
	}
}

.page {
	box-sizing: content-box;
	max-width: 50rem; /* 800/16 */
	margin: 0 auto;
	padding: 1.4rem var(--wrap);
}

.page__editlink {
	position: fixed;
	z-index: 100;
	background: #000;
	top: 0;
	left: 0;
	color: #fff;
	padding: .3em 1em;
}

.header__headline {
	width: 78%;
	max-width: 28.125rem; /* 450/16 */
	font-size: 2em;

	@media only screen and (max-width: 43.75em) { /* 700px */
		margin: 0 auto;
	}
}

.header__homelink {
	display: block;
}

.header__logo {
	width: 100%;
	height: auto;
	display: block;
}

.header__nav {
	margin: 0 0 3rem var(--wrap);

	@media only screen and (max-width: 43.75em) { /* 700px */
		margin-left: 0;
		margin-bottom: 1.33rem;
	}
}

.header__navlist {
	width: 100%;

	@media only screen and (max-width: 43.75em) { /* 700px */
		display: flex;
		justify-content: center;
	}
}

.header__navitem {
	display: inline-block;
	margin-right: .8em;

	&:last-child {
		margin-right: 0;
	}
}

.header__navlink {
	display: inline-block;
	padding: .6rem 0;
}

.header__navlink--active {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.main {
	margin-left: var(--wrap);

	@media only screen and (max-width: 43.75em) { /* 700px */
		margin-left: 0;
	}
}

.article__herotitle {
	font-size: 2em;
	line-height: 1;
	margin-bottom: 1em;
}

.article__date {
	color: #aaa;
	margin: -1.3em 0 1em 0;
}

.article__end {
	clear: both;
	margin-top: 3.5em;
	border-top: 1px solid #666;
	color: #666;
}

.article__aldus {
	width: 3em;
	height: 1.5em;
	background: #fff;
	display: block;
	margin: -.8em auto 0;
	color: inherit;
	fill: currentColor;
}

.logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 4rem;

	img {
		height: 3rem;
		width: auto;
		display: block;
		margin: 1.5rem;

		&.wide {
			height: 2rem;
		}

		&.verywide {
			height: 1.5rem
		}

		&.compact {
			height: 5rem;
		}

		&.littlecompact {
			height: 4rem;
		}
	}
}

.usertext {
	& > p:last-child::after {
		content: "";
		display: inline-block;
		background: var(--green);
		margin-left: .3em;
		height: .6em;
		width: .6em;
		position: relative;
		top: 1px;
	}

	p {
		margin: 0 0 1em 0;

		@media only screen and (max-width: 37.5em) { /* 600px */
			hyphens: auto;
		}
	}

	h2,
	h3 {
		margin: 1.8rem 0 .9rem 0;
		font-weight: 700;
		font-size: 1.3em;
		line-height: 1.25;

		&::before {
			content: '/ ';
			color: var(--green);
			display: inline-block;
			margin-right: .2em;
			position: relative;
			top: -.08em;
		}
	}

	h4 {
		font-weight: bold;
		margin: 2em 0 1em 0;
	}

	hr {
		border: 0;
		border-top: 2px solid var(--green);
		margin: 3.5rem auto;
		max-width: 20rem;

		@media only screen and (max-width: 37.5em) { /* 600px */
			margin-left: 0;
			margin-right: 0;
			width: 50%;
		}
	}

	pre {
		margin: 2rem 0;
		font-size: .9rem;
		font-family: menlo, consolas, fixed;

		code {
			padding: 1.5em;
		}
	}

	figure {
		margin: 2rem 0;

		&.shadow {
			box-shadow: 0 0 25px rgba(0,0,0,0.15);
		}

		&.fullwidth {
			width: 100%;
		}

		&.leftthird {
			float: left;
			width: 33%;
			margin: .4em 1.2em 1em 0;

			@media only screen and (max-width: 31.25em) { /* 500px */
				margin: .2em 1em .7em 0;
				width: 50%;
			}
		}

		&.gerrit {
			float: right;
			width: 10rem;
			height: 10rem;
			margin: 0 -.5rem 1rem 1rem;
			overflow: hidden;
			border-radius: 50%;
			border: 1px solid #ddd;

			img {
				object-fit: cover;
				height: 100%;
				max-width: none!important;
				float: right;
			}

			@media only screen and (max-width: 43.75em) { /* 700px */
				float:none;
				margin: 0 auto 1.5rem;
			}
		}

		&.txp + br {
			display: none;

			& + em {
				font-size: 1rem;
				margin: -1.5em 0 3rem;
				display: block;
				color: #666;
			}
		}
	}

	figcaption {
		padding: .6em 0;
		font-size: 1rem;
		color: #666;
		font-style: italic;
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	table {
		border-collapse: collapse;
		width: 100%;
		margin-bottom: 3rem;
	}

	td,
	th {
		font-size: .9em;
		vertical-align: top;
		padding: .5em 1em .5em 0;
		font-feature-settings: "lnum" 1;
		border-bottom: 1px solid #ccc;
		text-align: left;
	}

	th {
		font-style: italic;
	}

	ul,
	ol {
		margin: 1em 0;
	}

	ul li {
		margin: .5em 0;
		text-indent: -1.33em;
		margin-left: 1.33em;

		&:before {
			content: "→";
			font-weight: 200;
			float: left;
			font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			width: 1.33em;
			font-weight: bold;
			color: var(--green);
		}
	}

	ol li {
		list-style: outside decimal;
		margin: .5em 0 .5em 2em;
	}

	strong {
		font-weight: bold;
	}

	blockquote {
		font-style: italic;
		color: #666;
		border-left: 1px solid #666;
		border-right: 1px solid #666;
		padding-left: 1em;
		padding-right: 1em;
		margin: 2em 0;
	}

	p code {
		background: #eee;
		padding: 0 .3em;
	}
}

@media only screen and (max-width: 43.75em) { /* 700px */
	.usertext table.page-podcast {
		border-top: 1px solid #ccc;

		thead {
			display: none;
		}

		em {
			display: block;
		}
	}
}

@media only screen and (max-width: 28.125em) { /* 450px */
	.usertext table.page-vortraege {
		border-bottom: 1px solid #ccc;

		thead {
			display: none;
		}

		tr {
			display: block;
			padding: .5rem 0 .8rem;
			border-top: 1px solid #ccc;
		}

		td {
			display: block;
			border: none;
			padding: 0;
			width: 100%;

			&:first-child {
				font-weight: bold;
			}

			&:nth-child(3),
			&:nth-child(4) {
				display: inline;
				margin-right: .7em;

				&:empty {
					display: none;
				}
			}
		}
	}
}

.caps {
	font-feature-settings: "smcp";
	font-weight: inherit;
}

.media {
	position: relative;
	padding-top: 56.25%;
	margin: 2rem 0;
}

.media__inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;

	&.shadow {
		box-shadow: 0 0 25px rgba(0,0,0,0.15);
	}
}

.footer {
	margin: 5rem 0 1rem 6%;

	@media only screen and (max-width: 25em) { /* 400px */
		margin-top: 3rem;
	}
}

.footer__navitem {
	display: inline-block;
	margin-right: .8em;
}

.footer__navitem--last {
	float: right;
	margin-right: 0;

	&::after {
		content: '➔';
		font-size: .9rem;
		color: var(--green);
		transform: rotate(-90deg);
		display: inline-block;
		margin-left: .5em;
		position: relative;
		top: -.07rem;
	}

	@media only screen and (max-width: 25em) { /* 400px */
		float: none;
		display: block;
		text-align: right;
		margin: 1rem 0;
	}
}