/* SPD Corporate Design – Basiselemente (Stand August 2024) */

@font-face {
	font-family: "Open Sans";
	src: url("fonts/03_Ersatzschrift_OpenSans/OpenSans-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/03_Ersatzschrift_OpenSans/OpenSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/03_Ersatzschrift_OpenSans/OpenSans-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--spd-red: #e3000f;
	--spd-white: #ffffff;
	--spd-black: #000000;
	--spd-gray: #ededed;
	--font-sans: "Open Sans", system-ui, sans-serif;
	--font-versal: "Open Sans", system-ui, sans-serif;
	--logo-protection: 1.5rem;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.5;
}

/* Markenraum: Logo und Inhalt auf Rot */
.landing-page {
	position: relative;
	overflow: hidden;
	color: var(--spd-white);
	background-color: var(--spd-red);
}

.brand-space {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.brand-space__form {
	position: absolute;
	top: -18%;
	right: -8%;
	width: min(72vw, 42rem);
	height: min(72vw, 42rem);
	background: var(--spd-white);
	opacity: 0.07;
	clip-path: polygon(100% 0, 100% 100%, 0 55%, 35% 0);
	transform: rotate(-10deg);
}

.site-header {
	position: absolute;
	top: var(--logo-protection);
	right: var(--logo-protection);
	z-index: 2;
}

.site-logo {
	display: block;
	max-width: min(14rem, 52vw);
	color: inherit;
	text-decoration: none;
}

.site-logo__claim {
	display: block;
	font-family: var(--font-sans);
	font-size: clamp(0.7rem, 1.6vw, 0.85rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.site-logo--on-light {
	color: var(--spd-red);
}

.site-logo:focus-visible {
	outline: 2px solid var(--spd-white);
	outline-offset: 0.35rem;
}

.landing-page,
.impressum-page {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	padding-top: clamp(5rem, 14vh, 8rem);
}

.hero,
.imprint {
	position: relative;
	z-index: 1;
	width: min(100%, 52rem);
}

.eyebrow,
.lead,
.text-link {
	font-family: var(--font-versal);
	text-transform: uppercase;
}

.eyebrow {
	margin: 0 0 1.25rem;
	font-size: clamp(0.75rem, 1.8vw, 0.9rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.3;
}

.stoerer {
	display: inline-block;
	padding: 0.55rem 1rem;
	border: 2px solid var(--spd-white);
	transform: rotate(-10deg);
	transform-origin: left center;
}

h1 {
	margin: 0;
	font-family: var(--font-versal);
	font-size: clamp(3.2rem, 14vw, 9.5rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.lead {
	margin: 0.75rem 0 0;
	font-size: clamp(1.8rem, 6vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tagline {
	margin: 1.75rem 0 0;
	max-width: 38rem;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 400;
	line-height: 1.55;
	text-wrap: pretty;
}

.text-link {
	display: inline-block;
	margin-top: 2.75rem;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-decoration: none;
}

.text-link::after {
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 0.4rem;
	background: currentColor;
	content: "";
	transform-origin: left center;
	transition: transform 180ms ease;
}

.text-link:hover::after,
.text-link:focus-visible::after {
	transform: scaleX(0.45);
}

.text-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0.35rem;
}

/* Impressum: Rot auf Weiß (Alternative zum Markenraum) */
.impressum-page {
	flex-direction: column;
	align-items: stretch;
	color: var(--spd-black);
	background-color: var(--spd-white);
}

.impressum-page .site-header {
	position: relative;
	top: auto;
	right: auto;
	align-self: flex-end;
	margin-bottom: 2rem;
}

.impressum-page .site-logo:focus-visible {
	outline-color: var(--spd-red);
}

.imprint {
	width: min(100%, 40rem);
	margin: 0 auto;
	padding-bottom: 3rem;
}

.imprint.legal-content {
	width: min(100%, 42rem);
}

.legal-content__intro {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.65;
}

.legal-content section {
	margin-bottom: 1.75rem;
}

.legal-content h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--spd-red);
	text-transform: none;
	letter-spacing: normal;
}

.legal-content p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.75;
}

.legal-content p:last-child {
	margin-bottom: 0;
}

.legal-content a {
	color: var(--spd-black);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.legal-content a:hover,
.legal-content a:focus-visible {
	color: var(--spd-red);
}

.legal-content code {
	font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.site-footer,
.legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin-top: 2.75rem;
}

.site-footer .text-link,
.legal-nav .text-link {
	margin-top: 0;
}

.imprint h1 {
	font-size: clamp(2.5rem, 10vw, 5.5rem);
	color: var(--spd-red);
}

.impressum-page .text-link {
	color: var(--spd-black);
}

.impressum-page .text-link::after {
	background: var(--spd-red);
}

.impressum-page .text-link:focus-visible {
	outline-color: var(--spd-red);
}

.back-link {
	margin-top: 0;
	margin-bottom: 2rem;
}

address {
	font-size: 1rem;
	font-style: normal;
	line-height: 1.85;
}

address a {
	color: var(--spd-black);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

address a:hover,
address a:focus-visible {
	color: var(--spd-red);
}

.code-block {
	display: block;
	margin: 1.5rem 0 2rem;
	padding: 1.75rem 2rem;
	font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--spd-black);
	background-color: var(--spd-gray);
	border: 1px solid #d8d8d8;
	border-left: 3px solid var(--spd-red);
	border-radius: 0.25rem;
}

.code-block a {
	color: inherit;
	text-decoration: none;
}

.code-block a:hover,
.code-block a:focus-visible {
	color: var(--spd-red);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.text-link::after {
		transition: none;
	}

	.stoerer {
		transform: none;
	}

	.brand-space__form {
		transform: none;
	}
}

@media (max-width: 40rem) {
	.landing-page,
	.impressum-page {
		align-items: flex-start;
		padding-top: 5.5rem;
	}

	.site-header {
		top: 1rem;
		right: 1rem;
	}

	.hero {
		padding-top: 2rem;
	}

	.tagline {
		font-size: 1.05rem;
	}
}