:root {
	font-size: clamp(17.25px, 1.45vw, 22px);
	font-family: "IBM Plex Serif", "IBM Plex Serif Fallback", "Georgia", "Times New Roman", Times, serif;
	font-weight: regular;
	line-height: 1.6;

	--grid-template-columns: 1fr minmax(0, 36rem) 1fr;

	--theme-whiter: hsl(14 3% 100%);
	--theme-white: hsl(14 3% 99%);
	--theme-lightgrey: hsl(14 6% 60%);
	--theme-darkgrey: hsl(14 6% 30%);
	--theme-black: hsl(14 3% 8%);
	--theme-blacker: hsl(14 0% 0%);

	/* Primär (Blau) */
	/* Akzent (Orange) */
	/* Signal / Hinweis (Gelb) */

	--brand-blue: hsl(207 49% 33%);
	--brand-orange: hsl(14 100% 63%);
	--brand-yellow: hsl(42 100% 61%);

	--brand-blue-dark: hsl(207 40% 65%);
	--brand-orange-dark: hsl(14 100% 73%);
	--brand-yellow-dark: hsl(42 100% 65%);
}

* {
	box-sizing: border-box;
	font-size: inherit;
	padding: 0;
	margin: 0;
}

h1,
h2,
h3 {
	font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.3;
}

a {
	color: var(--color-emphasis);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
	background-color: transparent;
}

body svg {
	display: block;
}

svg .primary {
	fill: var(--color-primary);
}

svg .accent {
	fill: var(--color-accent);
}

svg .signal {
	fill: var(--color-signal);
}

svg .s-primary {
	stroke: var(--color-primary);
}

svg .s-accent {
	stroke: var(--color-accent);
}

svg .s-signal {
	stroke: var(--color-signal);
}


:root {
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scroll-behavior: smooth;

	--color-bg: var(--theme-white);
	--color-text: var(--theme-black);
	--color-muted: var(--theme-darkgrey);
	--color-emphasis: var(--theme-blacker);
	--color-enphasis: var(--theme-whiter);

	--color-primary: var(--brand-blue);
	--color-accent: var(--brand-orange);
	--color-signal: var(--brand-yellow);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: var(--theme-black);
		--color-text: var(--theme-white);
		--color-muted: var(--theme-lightgrey);
		--color-emphasis: var(--theme-signal);
		--color-enphasis: var(--theme-blacker);

		--color-primary: var(--brand-blue-dark);
		--color-accent: var(--brand-orange-dark);
		--color-signal: var(--brand-yellow-dark);
	}
}

@media print {

	body>header,
	body>footer {
		display: none;
	}

	body>main>section {
		padding: 2rem 0;
	}

}

body {
	display: grid;
	color: var(--color-text);
	fill: var(--color-text);
	background-color: var(--color-bg);
	grid-template-columns: var(--grid-template-columns);
	gap: 2rem 1rem;
	overflow: clip visible;
}

body>header,
body>main,
body>footer {
	display: grid;
	grid-column: 1 / 4;
	grid-template-columns: subgrid;
}

body>header>section.hero {
	display: grid;
	grid-column: 1 / 4;
	grid-template-columns: subgrid;
	min-height: clamp(4rem, 16vw, 12rem);
}

body>header>section.hero>aside {
	position: relative;
	grid-column: 1 / 4;
	grid-row: 2;
	pointer-events: none;
	aspect-ratio: 1200 / 70;
}

body>header>section.hero>aside svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	body>header>section.hero>aside svg animate {
		display: none;
	}
}

body>header>section.hero>main {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	align-items: baseline;
	gap: clamp(.5rem, 2vw, 1.5rem);
}

body>header svg.logo {
	display: block;
	width: min(60vw, 16rem);
	height: auto;
	max-width: 100%;
	margin: 3.2rem 0 2rem;
}

body>header svg.handword {
	display: block;
	width: min(30vw, 6rem);
	height: auto;
	flex: 0 0 auto;
	position: relative;
	top: clamp(.8rem, 2.4vw, 1.6rem);
	right: clamp(2rem, 6vw, 4rem);
	opacity: .9;
}

body>main {
	margin: clamp(1rem, 4vw, 3rem) 0;
	gap: clamp(2rem, 8vw, 6rem) 1rem;
}

body>main p,
body>div.layer p {
	margin-bottom: .8rem;
}

body>main p:last-of-type,
body>div.layer p:last-of-type {
	margin-bottom: 0;
}

body>main h1,
body>main h2,
body>main h3,
body>div.layer h1,
body>div.layer h2,
body>div.layer h3 {
	margin-bottom: .6rem;
}

body>main>section {
	grid-column: 2;
}

body>main>section.about>header {
	display: grid;
	grid-template: 1fr / 1fr;
	width: 50%;
	height: auto;
	aspect-ratio: 1;
	float: right;
	shape-outside: circle(50%);
	overflow: clip;
	transform: translatey(-12.5%);
}

body>main>section.about>header>picture {
	grid-column: 1;
	grid-row: 1;
	width: 75%;
	height: 75%;
	align-self: center;
	justify-self: center;
	border-radius: 50%;
	object-fit: cover;
	z-index: 0;
	overflow: clip;
}

body>main>section.about>header>picture>source,
body>main>section.about>header>picture>img {
	width: 100%;
	height: 100%;
}

body>main>section.about>header>svg {
	grid-column: 1;
	grid-row: 1;
	width: 135%;
	height: 135%;
	align-self: center;
	justify-self: center;
	pointer-events: none;
	z-index: 1;
}

body>main>section.about>header>svg path {
	transform-box: view-box;
	transform-origin: 0 0;
	will-change: transform;
}

@keyframes spinCW {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes spinCCW {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

body>main>section.about>header>svg path:nth-child(1) {
	animation: spinCW 107s linear infinite;
	scale: .98;
}

body>main>section.about>header>svg path:nth-child(2) {
	animation: spinCCW 77s linear infinite;
	scale: .92;
}

body>main>section.about>header>svg path:nth-child(3) {
	animation: spinCW 91s linear infinite;
	scale: .85;
}

@media (prefers-reduced-motion: reduce) {
	body>main>section.about>header>svg path {
		animation: none;
	}
}

body>footer {
	padding: clamp(1rem, 4vw, 3rem) 0;
	background: var(--color-primary);
	color: var(--color-bg);
	font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", Roboto, Arial, sans-serif;
}

body>footer a {
	display: block;
	color: var(--color-enphasis);
	-webkit-tap-highlight-color: transparent;
}

body>footer a:focus,
body>footer a:active {
	background: rgba(0, 0, 0, .10);
	color: var(--color-text);
}

body>footer>section {
	display: grid;
	grid-template: repeat(2, min-content) / repeat(2, 1fr);
	gap: clamp(1rem, 4vw, 3rem) 1rem;
	grid-column: 2;
}

body>footer>section>nav {
	display: flex;
	gap: 2rem;
	grid-row: 1;
	grid-column: 1 / 3;
}

body>footer>section>nav>a.top {
	margin-left: auto;
	text-align: right;
}

body>footer>section>span.contact {
	text-align: right;
}

body>div.layer {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(.1rem);
	opacity: 0;
	pointer-events: none;
	z-index: 999;
	transition: opacity 1s ease,
		backdrop-filter 1s ease;
}

body>div.layer:target {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 1s .62s ease,
		backdrop-filter 1s .62s ease;
}

body>div.layer>div.modal {
	position: relative;
	background: var(--color-enphasis);
	color: var(--color-text);
	max-width: 32rem;
	width: min(92vw, 32rem);
	max-height: 85vh;
	overflow: auto;
	border-radius: .25rem;
	padding: 1rem 1.62rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
	opacity: 0;
	transition: opacity 1s .62s ease;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scroll-behavior: smooth;
}

body>div.layer:target>div.modal {
	opacity: 1;
	transition: opacity 1s ease;
}

body>div.layer>div.modal header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	z-index: 1;
}

body>div.layer>div.modal header .close {
	position: absolute;
	top: 0;
	right: 1rem;
	padding: .25rem;
	color: var(--color-signal);
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
}