/* Ziele: Leere Räume schaffen, Bilder exponieren. */
/* Referenz ist 1920x1080 */
.we_preview {
	font-family: "Avenir", "Adwaita Sans", "Segoe UI", sans-serif;
	hyphens: auto;
	text-align: center;
}

/*
TASK;2026-01-16;WebEditor;LR;HV;WebEditorCSS;Abschnitte wecheln die Hintergrundfarbe für thematischen Zusammenhang
*/
.section {
	padding: 8vh 3vw;
}
.section:nth-child(even) {
	background-color: hsl(0 0 95);
}

/*
TASK;2026-01-16;WebEditor;LR;HV;WebEditorCSS;Es gibt Cards, die sich vom neutralen Hintergrund abheben
*/
.card {
	filter: drop-shadow(0 0 0.5ex hsl(0 0 0 / 30%));
	background-color: hsl(0 0 100 / 40%);
	border-radius: 2ex;
	padding: 1ex;
	backdrop-filter: blur(15px);
}
.ondark {
	color: hsl(0 0 100);
}
.ondark .card {
	filter: drop-shadow(0 0 0.5ex hsl(0 0 0 / 30%));
	background-color: hsl(0 0 0 / 40%);
}
.picture {
	min-height: 33vh;
	width: 100%;
	background: radial-gradient(hsl(210 100 50), hsl(310 100 50));
	background-position: center;
	background-size: cover;
	border-radius: 1ex;
	align-content: center;
	text-align: center;
}
.we_preview > .picture {
	/* Hero */
	/*background-attachment: fixed;
	min-height: 90vh;*/
}
.large .picture {
	min-height: 50vh;
}
.card .picture {
	min-height: 25vh;
}
@keyframes intro {
	from {
		transform: translateY(-1ex);
		filter: opacity(0) blur(6px) drop-shadow(0 0 0.2ex #000);
	}
	to {
		transform: translateY(0);
		filter: opacity(1) blur(0px) drop-shadow(0 0 0.2ex #000);
	}
}
.picture > h1 {
	/*animation: 3s ease intro;
	rotate: -9deg;*/
	filter: drop-shadow(0 0 0.3ex #fff);
}
.picture > .ondark > h1 {
	/*animation: 3s ease intro;
	rotate: -9deg;*/
	filter: drop-shadow(0 0 0.3ex #000);
	color: #fff;
}

/*
TASK;2026-01-16;WebEditor;LR;HV;WebEditorCSS;Navigationsleiste mit Dropdown
*/
nav > .dropdown {
	position: relative;
	display: block;
}
nav > .dropdown > div {
	display: none;
	position: absolute;
	/*right: 0;*/
	z-index: 1;
	background-color: hsl(0 0 100 / 67%);
	filter: drop-shadow(0 0 0.1ex hsl(0 0 50));
	padding: 1ex;
	border-radius: 1ex;
}
nav > .dropdown:hover > div {
	display: block;
	backdrop-filter: blur(6px);
}
nav > .dropdown > div > a {
	display: block;
	min-width: max-content;
	padding: 1ex;
}
nav,
footer {
	background-color: hsl(0 0 100 / 67%);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(1em, max-content));
	grid-gap: 2vh 10vw;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.1em;
	min-height: 8vh;
	/*position: sticky;
	top: 0;
	z-index: 1;
	backdrop-filter: blur(15px);*/
}
nav a,
footer a {
	color: #000;
	text-decoration: none;
}
h1 > div, h2 > div, h3 > div, h4 > div {
	font-size: 0.54em;
	letter-spacing: normal;
}
nav a:hover,
footer a:hover {
	color: hsl(210 100 50);
}
fieldset {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1ex 1em;
	border-radius: 1ex;
}
blockquote {
	margin: 0;
}
ul, ol, dl, blockquote {
	text-align: initial;
}

/*
TASK;2026-01-16;WebEditor;LR;HV;WebEditorCSS;Logo mit Tagline und Animation
*/
@keyframes logo {
	from {
		width: 0;
	}
}
@keyframes tagline {
	from {
		color: initial;
	}
}
a div:nth-of-type(1) {
	font-family: "Didot", "Theano Didot", "Source Serif Pro", "Georgia", serif;
	font-weight: 400;
	/*font-variant: small-caps;*/
	font-size: 1.5em;
}
a div:nth-of-type(2) {
	font-family: "Didot", "Theano Didot", "Source Serif Pro", "Georgia", serif;
	font-weight: 400;
	font-size: 0.8em;
}
a hr {
	width: 100%;
	margin: auto;
	animation: 3s ease logo;
}
a mark {
	animation: 3s ease tagline;
}

@media (prefers-color-scheme: dark) {
	.we_preview {
		background-color: hsl(0 0 10);
		color: hsl(0 0 100);
	}
	.section:nth-child(even) {
		background-color: hsl(0 0 15);
	}
	.picture > h1 {
		color: hsl(0 0 0);
	}
	nav,
	footer {
		background-color: hsl(0 0 10 / 80%);
	}
	nav a,
	footer a {
		color: hsl(0 0 100);
	}
	.card {
		/* Card */
		filter: drop-shadow(0 0 0.5ex hsl(0 0 0 / 30%));
		background-color: hsl(0 0 0 / 40%);
	}
	nav > .dropdown > div {
		background-color: #222c;
	}
}