/* -----------------------------------------------
	www.stolpersteine-lich.de by www.lichtsignale.de
----------------------------------------------- */


/*	S C H R I F T E N
----------------------------------------------- */

@font-face {
	font-family: "Newsreader Display";
	src: url("schriften/NewsreaderDisplay-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader Text";
	src: url("schriften/NewsreaderText-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader Text";
	src: url("schriften/NewsreaderText-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Iosevka Extended";
	src: url("schriften/Iosevka-SemiboldExtended.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}


/*	G R U N D
----------------------------------------------- */

:root {
	--blau: #00359f;
	--text: #231f20;
	--grund: #f6f4f1;
	--weiss: #ffffff;
	--rand: clamp(1rem, 5vw, 4.5rem);
	--mono: "Iosevka Extended", ui-monospace, "SF Mono", Menlo, monospace;
}

*, ::before, ::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font: 500 1.125rem/1.5 "Newsreader Text", Georgia, serif;
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100svh;
}

h1, h2, h3, h4, p, ul {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--blau);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/*	K O P F
----------------------------------------------- */

.kopf {
	background: var(--weiss);
	padding: 1.5rem var(--rand) 2.5rem;
}

.wortmarke {
	display: inline-block;
	font: 600 1.0625rem/1.35 var(--mono);
	text-transform: uppercase;
	text-decoration: none;
}

.kopf h1 {
	margin-block-start: 3rem;
	max-inline-size: 16em;
	color: var(--blau);
	font: 500 clamp(2rem, 1.2rem + 4vw, 4rem)/1.05 "Newsreader Display", Georgia, serif;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}


/*	I N H A L T
----------------------------------------------- */

main {
	flex: 1;
	padding: 2.5rem var(--rand) 4rem;
}

.text {
	max-inline-size: 36em;
}

.text > * + * {
	margin-block-start: 1em;
}

.text h2 {
	margin-block-start: 2.5em;
	font: 600 0.8125rem/1.4 var(--mono);
	text-transform: uppercase;
}

.text h2 + * {
	margin-block-start: 0.6em;
}

.text h3 {
	margin-block-start: 2em;
	font-weight: 700;
	font-size: 1rem;
}

.text h4 {
	margin-block-start: 1.5em;
	font-weight: 700;
	font-size: 1rem;
}

.text h3 + *,
.text h4 + * {
	margin-block-start: 0.4em;
}

.termin strong {
	display: block;
	font-weight: 700;
}

.recht h2 {
	margin-block-start: 2.2em;
	font: 500 1.5rem/1.2 "Newsreader Display", Georgia, serif;
	text-transform: none;
}

.recht h2:first-child {
	margin-block-start: 0;
}

.recht p {
	overflow-wrap: break-word;
	hyphens: auto;
}


/*	F U S S
----------------------------------------------- */

footer {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 4rem;
	background: var(--blau);
	color: var(--weiss);
	padding: 1.75rem var(--rand) 2.5rem;
	font: 600 0.875rem/1.4 var(--mono);
}

footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	padding: 0;
	list-style: none;
}

footer a {
	display: inline-block;
	padding-block: 0.375rem;
	text-decoration: none;
}

footer a:hover {
	color: inherit;
	text-decoration: underline;
}


/*	D R U C K
----------------------------------------------- */

@media print {
	.kopf, footer {
		background: none;
		color: var(--text);
	}
}