/*
-----------------------------------------------
	www.boley-stiftung.de
 by Simon Malz www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

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

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

img, svg, video {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

em, i {
	font-style: normal;
}


/*		W E B F O N T S
----------------------------------------------- */

@font-face {
	font-family: "BS Pastiche";
	src: url("fonts/PasticheGrotesqueWeb-Regular.woff2") format("woff2"),
		url("fonts/PasticheGrotesqueWeb-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/*		B A S I C S
----------------------------------------------- */

:root {
	--color-text: #141414;
	--color-violet: #a1a0cf;
	--color-yellow: #ffcd44;
	--spacing: 1.3em;
}

body {
	color: var(--color-text);
	background: #fff;
	font-family: "BS Pastiche", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
	font-size: 15px;
	line-height: var(--spacing);
	letter-spacing: 0.01em;
	text-align: left;
	font-variant-ligatures: none;
}

a:link, a:visited {
	color: var(--color-text);
	text-decoration: none;
}

a:hover, a:active {
	color: var(--color-violet);
}

/* Sichtbarer Tastatur-Fokus */
:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 2px;
}

img, video {
	max-inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	object-position: center center;
	height: auto;
}


/*		L A Y O U T
----------------------------------------------- */

body {
	padding: var(--spacing);
}

/* Logo-Wrapper füllt den Header, damit das Logo (width: 50%) überall
   gleich groß ist – ob in <h1> (Startseite) oder <a> (404). */
header h1,
header a {
	display: block;
	width: 100%;
}

header img {
	display: block;
	position: relative;
	left: -1px;
}

main article {
	font-size: 125%;
	line-height: 1.2;
	margin-top: calc(var(--spacing) * 3);
	margin-bottom: calc(var(--spacing) * 4);
}

main article p {
	margin-bottom: 0.65em;
}

footer p {
	margin-bottom: 0.65em;
}

#s1, #s2, #s7 {
	display: block;
}

#datenschutz {
	margin-bottom: 0.65em;
}

#datenschutz summary {
	cursor: pointer;
	list-style: none;
}

#datenschutz summary::-webkit-details-marker {
	display: none;
}

#datenschutz summary:hover {
	color: var(--color-violet);
}

/* Panel wird per JS in der Höhe animiert (auf und zu); overflow schneidet
   den Inhalt während der Bewegung sauber ab. */
#datenschutz > div {
	overflow: hidden;
}

/* Struktur des Datenschutztexts: echte Überschriften und Absätze,
   dezent gehalten (Fließtext-Größe), nur über Gewicht/Abstand gegliedert. */
#datenschutz h2,
#datenschutz h3,
#datenschutz h4 {
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 0.3em;
}

#datenschutz h2 {
	font-size: 1.15em;
	margin-top: 1.6em;
}

#datenschutz h3 {
	font-size: 1em;
	margin-top: 1.3em;
}

#datenschutz h4 {
	font-size: 1em;
	margin-top: 0.9em;
}

#datenschutz p {
	margin-bottom: 0.65em;
}

#datenschutz ul {
	margin: 0 0 0.65em;
	padding-left: 1.4em;
	list-style: disc;
}

#datenschutz li {
	margin-bottom: 0.35em;
}

/* 404-Überschrift: als h1 semantisch, optisch wie der übrige Fließtext */
main article h1 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0 0 0.65em;
}


/*		R E S P O N S I V E
----------------------------------------------- */

@media screen and (min-width: 700px) {

body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	column-gap: var(--spacing);
	min-height: calc(100vh - 2 * var(--spacing));
}

/* Logo ab 700px fest an der Viewport-Position verankern: bleibt beim
   Aufklappen des Datenschutz-Bereichs (und beim Scrollen) an seinem Platz.
   Die Box deckt exakt die linke Grid-Spalte ab. */
header {
	position: fixed;
	top: var(--spacing);
	left: var(--spacing);
	width: calc(50% - 1.5 * var(--spacing));
	height: calc(100vh - 2 * var(--spacing));
	display: flex;
	align-items: center;
}

main, footer {
	grid-column: 2;
}

header img {
	top: -10px;
	padding-bottom: 1vh;
	width: 50%;
}

main article {
	font-size: 2.25vw;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: -0.4vw;
	margin-bottom: calc(var(--spacing) * 1);
}

}


@media screen and (min-width: 1280px) {

#s5 {
	display: block;
}

body {
	font-size: 18px;
	line-height: var(--spacing);
	letter-spacing: 0.01em;
}

footer p,
footer #datenschutz {
	position: relative;
	left: 3px;
}

}