@charset "UTF-8";
/* CSS Document */

* {
	font-family: 'EB Garamond', Times, "Times New Roman", "serif";
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	letter-spacing: 0.02em;
	margin: 0;
}
body {background-size: cover; transition: background-image 0.6s ease-in-out; background-attachment: fixed; background-position: bottom;}
header {position: relative; width: calc(100vw - 2.4em); padding: 1.2em 1.2em 0em 1.2em; text-align: left; z-index: 9999;}
nav {position: absolute; width: auto; padding: 1em 1.2em; z-index: 999;}
nav h4 {margin-top: 1em;}
nav h4:first-child {margin-top: 0;}
figure {position: relative; margin-left: 0.4em;}
figure.ganz {width: calc(100vw - 0.8em); height: auto;}
figure.halb {width: calc(50vw - 0.6em); height: auto;}
figure div {width: 100%; height: 100%;}
figure img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0.2em;}
figcaption {position: relative; margin: -0.1em 0.4em 0.8em 0.8em;}
header h1, header h2, h4, figcaption p, figcaption p em {font-size: 11px; letter-spacing: 0.04em; line-height: 1.4em;}
div.text {margin: 0.2em 1em 1em 1em; hyphens: auto;}
div.text p {margin-top: 1em;}
div.text p:first-child {margin-top: 0;}
.spaltenumbruch {break-before: column;}

div.caption {font-size: 11px; letter-spacing: 0.04em; line-height: 1.4em; margin: 0 1.8em 1.4em 1.8em; position: fixed; bottom: 0; right: 0; max-width: 50vw;}
div.link {z-index: 9; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}

.fade-in {
	animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Links */
a {text-decoration: none; color: #000;}
a:hover {color: blue;}
button {background-color: #FFF; border: solid 0.08em; border-radius: 0.4em; cursor: pointer; padding: 0.2em 0.5em;}
button:hover {background-color: #DDD;}
button p {font-family: 'IBM Plex Mono', Monaco, "monospace"; font-size: 8px; font-weight: 500; letter-spacing: 0.1em; color: #000; text-align: left; text-decoration: none;}

/* Responsive */
@media (orientation: landscape) {
	nav.spalten, div.text, .spalten {column-count: 2;}
}
@media (orientation: portrait) {
	nav.spalten, div.text, .spalten {column-count: 1;}
}