/* ! welcome to the wurzelseppli stylesheet ;) ws.css */

/* FONT FACES!!! */

@font-face {
	font-family: "Eczar";
	font-weight: 400;
	font-display: swap;
	src:
		local("Eczar Regular"),
		local("Eczar-Regular"),
		url(../fonts/eczar-regular.ttf) format("truetype");
}
@font-face {
	font-family: "Eczar";
	font-weight: 500;
	font-display: swap;
	src:
		local("Eczar Medium"),
		local("Eczar-Medium"),
		url(../fonts/eczar-medium.ttf) format("truetype");
}
@font-face {
	font-family: "Eczar";
	font-weight: 600;
	font-display: swap;
	src:
		local("Eczar SemiBold"),
		local("Eczar-SemiBold"),
		url(../fonts/eczar-semibold.ttf) format("truetype");
}
@font-face {
	font-family: "Eczar";
	font-weight: 700;
	font-display: swap;
	src:
		local("Eczar Bold"),
		local("Eczar-Bold"),
		url(../fonts/eczar-bold.ttf) format("truetype");
}
@font-face {
	font-family: "Eczar";
	font-weight: 800;
	font-display: swap;
	src:
		local("Eczar ExtraBold"),
		local("Eczar-ExtraBold"),
		url(../fonts/eczar-extrabold.ttf) format("truetype");
}
@font-face {
	font-family: "IM Fell English";
	font-style: normal;
	font-display: swap;
	src:
		local("IM FELL English Roman"),
		local("IM_FELL_English_Roman"),
		url(../fonts/IMFellEnglish-Roman.ttf) format("truetype");
}
@font-face {
	font-family: "IM Fell English";
	font-style: italic;
	font-display: swap;
	src:
		local("IM FELL English Roman"),
		local("IM_FELL_English_Roman"),
		url(../fonts/IMFellEnglish-Italic.ttf) format("truetype");
}
@font-face {
	font-family: "IM Fell English SC";
	font-style: normal;
	font-display: swap;
	src:
		local("IM FELL English SC"),
		local("IM_FELL_English_SC"),
		url(../fonts/IMFellEnglish-SC.ttf) format("truetype");
}

/* --------------------------------------------------------------------------------- 
   Generic styles
   --------------------------------------------------------------------------------- */

html,
body {
	margin: 0;
	padding: 0;
	font-family:
		Georgia Pro,
		Georgia,
		serif;
	line-height: 1.2;
	min-height: 100vh;
}
html {
	background: #fff; /* hack to force the body background to stay on body and not be hoisted to the canvas, thus allowing Chrome to composite things onto the body background */
}
@media (prefers-color-scheme: dark) {
	html {
		filter: invert(1);
	}
	/* the following really should be managed by a cascade layer */
	html img,
	html video,
	html iframe,
	html img.book.cover,
	html img.book.cover.big,
	html .footer-social a:hover img {
		filter: invert(1);
	}
	html #inhalt figure.standalone img {
		box-shadow: 0.25em 0.25em 0.67em #fff8;
	}
}

body {
	font-size: 102.5%;
	background:
		linear-gradient(180deg, rgba(255, 128, 0, 0.033), 3em, rgba(255, 216, 0, 0) 33em),
		linear-gradient(
				90deg,
				hsla(34deg, 0%, 96%, 0.98) 5%,
				10%,
				hsla(34deg, 38%, 99%, 0.95) 25%,
				33%,
				hsla(34deg, 38%, 99%, 1) 50%,
				67%,
				hsla(34deg, 38%, 99%, 0.975) 75%,
				90%,
				hsla(34deg, 0%, 96%, 0.98) 95%
			)
			0 0 / 100% 100% no-repeat,
		linear-gradient(179deg, hsla(34deg, 38%, 99%, 1) 11em, hsla(34deg, 38%, 99%, 0) 13em),
		linear-gradient(0deg, hsla(34deg, 38%, 99%, 1) 23em, hsla(34deg, 38%, 99%, 0) 42em),
		/*bg au uffm chleine bildschirm -->*/ url(../img/bg-gsicht.png) 0 0,
		hsla(34deg, 38%, 99%, 1);

	color: hsl(33deg, 50%, 10%);
}

@media (max-width: 40em) {
	body {
		hyphens: auto;
	}
}
@media (min-width: 40em) {
	body {
		background:
			linear-gradient(180deg, rgba(255, 128, 0, 0.033), 3em, rgba(255, 216, 0, 0) 33em),
			linear-gradient(
					90deg,
					hsla(34deg, 0%, 96%, 0.98) 5%,
					10%,
					hsla(34deg, 38%, 99%, 0.95) 25%,
					33%,
					hsla(34deg, 38%, 99%, 1) 50%,
					67%,
					hsla(34deg, 38%, 99%, 0.975) 75%,
					90%,
					hsla(34deg, 0%, 96%, 0.98) 95%
				)
				0 0 / 100% 100% no-repeat,
			linear-gradient(179deg, hsla(34deg, 38%, 99%, 1) 11em, hsla(34deg, 38%, 99%, 0) 13em),
			linear-gradient(0deg, hsla(34deg, 38%, 99%, 1) 23em, hsla(34deg, 38%, 99%, 0) 42em),
			url(../img/bg-gsicht.png) 0 0,
			url(../img/bg-gsicht.png) 250px -50px,
			hsla(34deg, 38%, 99%, 1);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:
		Eczar,
		IM Fell English,
		Georgia,
		serif;
	font-weight: 500;
	line-height: 1.2;
	margin: 1.5em 0 0.5em;
	color: #db5856;
}
h2 {
	font-size: 200%;
}
h3 {
	font-size: 167%;
}
h4 {
	font-size: 133%;
}
h5 {
	font-size: 115%;
}
h6 {
	font-size: 100%;
}

h1 {
	font-family:
		IM Fell English,
		Eczar,
		Georgia,
		serif;
	font-variant-numeric: lining-nums;
	font-size: 400%;
	line-height: 1.1;
	hanging-punctuation: first allow-end;
	margin: 0.67em 0 0.67em -0.1em;
}

@media (max-width: 40em) {
	h1 {
		font-size: 300%;
	}
}
@media (max-width: 30em) {
	h1 {
		font-size: 250%;
	}
}

#main > h1 + p::first-line,
#main > h2 + p::first-line,
#main > h3 + p::first-line {
	font-size: 110%;
	line-height: 1.33;
}

/* Überschrift mit direktem Untertitel */
article.entry > header:has(+ .untertitel) :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0.1em;
}

/* Untertitel direkt an die Überschrift anschließen */
article.entry > .untertitel {
	display: block;
	margin-top: -0.9em;
	margin-bottom: 0.5em;
}

.vorstand {
	font-family:
		IM Fell English SC,
		Eczar,
		Georgia,
		serif;
	font-style: normal;
	font-size: 120%;
	text-decoration: none;
	font-weight: inherit;
	color: #47885a;
	margin-top: 0;
}
.conVorstand {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5em;
	align-items: start;
	row-gap: 0;
}
.conVorstand > div {
	min-width: 0;
	padding: 0;
	border: 0 dashed #8baf78;
	border-radius: 12px;
	box-sizing: border-box;
}

@media (max-width: 50em) {
	.conVorstand {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
}

.title a[href] {
	text-underline-offset: 0.15em;
}
ol li::marker,
ul li::marker {
	color: #47885a;
}
a[href] {
	text-decoration-thickness: 0.03875em;
	text-underline-offset: 0.2em;
	/* text-decoration-color: hsl(13deg,13%,67%);
	color: hsl(13deg,33%,42%); */
	text-decoration-color: #526f49;
	color: #4f9e63;
}
a[href]:hover {
	text-decoration-thickness: 0.125em;
	text-underline-offset: 0.15em;
	text-decoration-color: currentColor;
}
@supports (text-decoration-thickness: 1px) {
	a[href]:hover {
		/*color: hsl(33deg,99%,33%);*/
		color: #526f49;
	}
}

h1 a[href],
h2 a[href],
h3 a[href] {
	text-decoration-color: currentColor;
}

img,
video {
	max-width: 100%;
	height: auto;
}

code,
kbd,
tt,
pre,
xmp {
	font-family: Consolas, monospace;
	font-size: 0.933em;
	hyphens: none;
}
code {
	color: hsl(25deg, 75%, 25%);
}
kbd {
	color: hsl(145deg, 75%, 25%);
}
tt {
	color: hsl(25deg, 15%, 40%);
}

pre > code {
	margin: 1em 0;
	line-height: 1.2;
}
:not(pre) > code,
:not(pre) > kbd {
	background: hsla(25deg, 75%, 25%, 0.1);
	padding: 0.15em 0.33em 0.1em;
	border: solid #fff8;
	border-width: 2px 0;
}
:not(pre) > kbd {
	background-image: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	background-color: hsla(25deg, 0%, 0%, 0.1);
}
table code {
	background: none;
	border: none;
	color: inherit;
}
pre,
xmp {
	margin: 1.5em 0.25ch;
	border-radius: 0.25em;
	padding: 1em;
	background: linear-gradient(to right, hsla(25deg, 0%, 33%, 0.1), 67%, hsla(25deg, 0%, 33%, 0.075));
	white-space: pre-wrap;
	overflow-wrap: break-word;
	tab-size: 2.5;
}
pre + pre,
xmp + xmp {
	margin-top: -0.5em;
}
pre[class],
xmp[class] {
	background: linear-gradient(to right, hsla(25deg, 75%, 25%, 0.1), 67%, hsla(25deg, 75%, 25%, 0.075));
}

pre[class]::before,
xmp[class]::before {
	display: block;
	padding: 0.125ch;
	margin: -1em -1em 1em;
	border-radius: 0.25em 0 0 0.25em;
	content: attr(class);
	text-align: center;
	text-transform: uppercase;
	font:
		600 90% Eczar,
		serif;
	background: hsla(25deg, 75%, 31%, 0.075);
	color: hsla(33deg, 50%, 10%, 0.75);
}

@media (min-width: 40em) {
	pre[class],
	xmp[class] {
		display: grid;
		grid-template-columns: 1fr min-content;
		margin-right: -1.75em;
		padding: 0 0 0 1em;
	}
	pre[class]::before,
	xmp[class]::before {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0 0 0 1em;
		padding-left: 0.05ch;
		writing-mode: vertical-lr;
	}
}

del {
	opacity: 0.4;
	text-decoration-thickness: 0.2em;
	text-decoration-color: rgba(0, 0, 0, 0.4);
	text-decoration-skip-ink: all;
}
pre code del {
	text-decoration-thickness: 0.15em;
}
ins {
	background: rgba(255, 255, 0, 0.5);
	border: solid #fff8;
	border-width: 2px 0;
	text-decoration: none;
}
pre code ins {
	border-width: 1px;
	padding-block: 1px;
}

div:not(#main) ul,
div:not(#main) ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

#main > dl dt {
	text-align: left;
	margin: 1.5em 0 0;
	padding: 0;
	border-right: none;
	font-weight: 600;
}
#main > dl dd {
	margin: 0.5em 0;
	padding: 0 0 0 1em;
	max-width: 75ch;
}

@media (min-width: 45em) {
	#main > dl.compact {
		display: grid;
		grid-template-columns: 16ch 1fr;
		align-items: baseline;
	}
	#main > dl.compact dt {
		text-align: right;
		margin: 0.5em 0;
		padding: 0 0.5em 0 0;
		border-right: 0.125em solid rgba(0, 0, 0, 0.5);
	}
	#main > dl.compact dd {
		margin: 0.5em 0;
		padding: 0 0.5em;
		max-width: 75ch;
	}
}

blockquote {
	color: hsl(33deg, 5%, 33%);
	margin: 1.5em 1em;
	padding: 1em 2em;
	font-style: italic;
	background-image: url(../img/quote-open.png), url(../img/quote-close.png),
		linear-gradient(90deg, transparent 1.25em, currentColor 2.5em, transparent),
		linear-gradient(90deg, transparent, currentColor calc(100% - 2.5em), transparent calc(100% - 1.25em));
	background-repeat: no-repeat;
	background-size:
		auto 1em,
		auto 1em,
		100% 1px,
		100% 1px;
	background-position:
		0% 0%,
		100% 100%,
		50% 0%,
		50% 100%;
}
blockquote > *:first-child {
	margin-top: 0;
}
blockquote > *:last-child {
	margin-bottom: 0;
}
blockquote p.attrib,
blockquote + p.attrib {
	font-size: 90%;
	font-style: normal;
}

.framed {
	border: 3px double currentColor;
}
img.border {
	border: 2px solid currentColor;
}

img.book {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
img.book.cover {
	filter: drop-shadow(0.33em 0.33em 0.125em rgba(0, 0, 0, 0.125))
		drop-shadow(0.25em 0.25em 0.125em rgba(0, 0, 0, 0.33)) drop-shadow(0.1em 0.1em 0.125em rgba(0, 0, 0, 0.25))
		drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.1));
}
img.book.cover.big {
	filter: drop-shadow(0.1em 0.1em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0.15em 0.15em 0.15em rgba(0, 0, 0, 0.25))
		drop-shadow(0.33em 0.33em 0.15em rgba(0, 0, 0, 0.15)) drop-shadow(0.5em 0.5em 0.2em rgba(0, 0, 0, 0.2))
		drop-shadow(0.67em 0.67em 0.25em rgba(0, 0, 0, 0.25)) drop-shadow(1.33em 1.33em 0.33em rgba(0, 0, 0, 0.3))
		drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.1));
}

table {
	margin: 1em;
	border-collapse: separate;
	border-spacing: 1px;
}

table caption {
	font-style: italic;
	font-size: 90%;
	line-height: 1.2;
	margin-top: 0.15em;
	caption-side: bottom;
}

table th,
table td {
	padding: 0.2em 0.25em 0.1em;
}

table.data {
	margin: 1.5em 0;
	min-width: 50%;
}
table.data caption {
	font-size: 1em;
	caption-side: top;
}
table.data :not(caption, code, pre) {
	font:
		1em Source Sans Pro,
		Open Sans,
		Helvetica,
		sans-serif;
}

table.data th {
	padding: 0.5ch 1ch 0.25ch;
	font-weight: 550;
}

table.data td {
	padding: 0.25ch 1ch 0.15ch;
}

table.data thead th {
	background: hsla(30, 50%, 50%, 0.5);
}

table.data tbody tr:nth-child(odd) > * {
	background: hsla(30, 50%, 50%, 0.13);
}

table.data tbody tr:nth-child(even) > * {
	background: hsla(30, 50%, 50%, 0.25);
}

table.data :not(thead) + tbody tr:first-child > * {
	border-top: 2px solid hsla(30, 50%, 50%, 0.5);
}

table.data tbody tr:last-child > * {
	border-bottom: 2px solid hsla(30, 50%, 50%, 0.5);
}
table.data:has(+ .fnote) {
	margin-block: 1.5em 0;
}
#inhalt table.data + .fnote,
table.data + .fnote {
	margin-block: 0.25em 1.5em;
	font-size: 90%;
}

table.chart {
	margin: 1.5em 0;
	border-collapse: separate;
	border-spacing: 0;
}
table.chart th,
table.chart td {
	padding: 0.75em 0.5em;
	text-align: left;
	vertical-align: top;
}
table.chart tbody tr td {
	border-top: 1px solid rgba(0, 0, 0, 0.25);
}
table.chart td > :only-child {
	margin: 0;
}

hr.abschnid {
	display: none;
}

a.abschnid {
	display: none;
	text-align: right;
	text-decoration: none;
	font-style: italic;
	font-size: 120%;
	font-family:
		IM Fell English,
		Eczar,
		Georgia,
		serif;
	color: inherit;
	opacity: 0.5;
}

@media (max-width: 40em) {
	a.abschnid {
		display: block;
	}
}

/* --------------------------------------------------------------------------------- 
   Structural styles
   --------------------------------------------------------------------------------- */

body > #main,
body > #inhalt {
	padding-top: 2em;
	padding-left: 1em;
	padding-right: 1em;
	line-height: 1.45;
}

@media (min-width: 40em) {
	body,
	body.arch {
		display: grid;
		grid-template-columns: [left] minmax(1em, 1fr) [main] minmax(10em, 40em) [right] minmax(10em, 1fr);
		grid-template-rows: repeat(4, min-content) auto repeat(4, min-content);
		grid-gap: 0 2em;
	}
	body.arch {
		grid-template-columns: [left] minmax(7em, 1fr) [main] minmax(10em, 40em) [right] minmax(10em, 1fr);
	}
	body > * {
		grid-column: 1 / -1;
	}
	body > #main,
	body > #inhalt {
		grid-column: main;
		grid-row: 2 / -5;
		padding: 3em 0 0;
	}
}

/* oobe Masthead */

#oobe {
	grid-column: 1 / -1;
	grid-row: 1;
	background: url(../img/header-left.png) 0 100% / auto 50% no-repeat;
	min-height: 13em;
	position: relative;
	mix-blend-mode: darken;
}
#oobe #skiplinks {
	position: absolute;
	bottom: 1.5vh;
	left: -51em;
	width: 10em;
}
#oobe #skiplinks a {
	display: block;
	background: black;
	color: white;
	margin: 3px;
	padding: 0.25em;
	transition: 150ms;
}
#oobe #skiplinks a:focus {
	background: #060;
}
#oobe #skiplinks a:focus,
#oobe #skiplinks a:focus ~ a {
	transform: translate(52em);
}
#oobe #skiplinks:focus-within a {
	transform: translate(52em);
}
@media (max-height: 42em) {
	#oobe #skiplinks {
		width: auto;
	}
	#oobe #skiplinks a {
		display: inline-block;
	}
}

#oobe h1 {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
#oobe a[href="/"] {
	box-sizing: border-box;
	position: absolute;
	height: 97%;
	width: 100%;
	padding: 0;
	padding-right: 0.1em;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-family:
		IM Fell English,
		Eczar,
		Georgia,
		serif;
	font-style: italic;
	font-size: 2rem;
	font-weight: 100;
	text-decoration: none;
	color: #db5856;
	line-height: 1;
	opacity: 0.75;
}

.untertitel {
	color: #e86d67;
}

/* Extrem schmale Bildschirme */

@media (min-width: 30em) {
	#oobe {
		background:
			url(../img/header-left.png) 0 100% / 45% auto no-repeat,
			url(../img/header-right.png) 100% 100% / 45% auto no-repeat;
		min-height: 9em;
	}
	@supports (mix-blend-mode: darken) {
		#oobe {
			background:
				url(../img/header-left.png) 0 100% / 45% auto no-repeat,
				url(../img/header-right.png) 100% 100% / 45% auto no-repeat,
				linear-gradient(hsla(34deg, 38%, 99%, 0.5), hsla(34deg, 38%, 99%, 0.8)),
				url(../img/header-left.png) -9% calc(100% - 4.2vw) / 29% auto no-repeat;
		}
	}
	#oobe h1 {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 50%;
		top: 0;
		left: 50%;
		position: absolute;
	}
}
@media (min-width: 40em) {
	#oobe {
		min-height: 16vw;
	}
	#oobe a[href="/"] {
		font-size: 5vw;
		height: 100%;
	}
}

/* Navlinks */

#navigate {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 42;
	font-size: 1.125em;
}
#navlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em 1em 0;
	margin: 0;
	list-style: none;
	font-family:
		IM Fell English,
		Georgia,
		serif;
}
#navlinks li {
	text-align: center;
	padding: 0.25em 0.5em;
}
#navlinks a[href] {
	display: block;
	padding: 0;
	color: hsla(33deg, 50%, 10%, 0.75);
}
body.arch #navigate #navlinks #homeLink,
body.css #navigate #navlinks #vorstandLink,
body.tools #navigate #navlinks #chronikLink,
body.write #navigate #navlinks #kontaktLink,
body.speak #navigate #navlinks #speakLink,
body.other #navigate #navlinks #otherLink,
body.feeds #navigate #navlinks #feedsLink,
body.ueber #navigate #navlinks #uebersidde {
	font-weight: 600;
	font-style: italic;
}

@media (min-width: 40em) {
	#navigate {
		position: sticky;
		grid-column: right;
		grid-row: 2;
		background: radial-gradient(ellipse 10em 8em at 100% 45%, hsl(34deg 38% 98%) 25%, hsla(34deg 38% 98% / 0) 75%);
		--textStroke: hsl(34deg 38% 98%) 0 0 1em;
		text-shadow: var(--textStroke), var(--textStroke), var(--textStroke), var(--textStroke), var(--textStroke),
			var(--textStroke), var(--textStroke), var(--textStroke), var(--textStroke);
	}
	#navlinks {
		display: block;
		padding: 0;
		margin-bottom: 2.5em;
	}
	#navlinks li {
		text-align: right;
		padding: 0.25em 1em;
	}
	body.home #navigate #navlinks #homeLink,
	body.vorstand #navigate #navlinks #vorstandLink,
	body.chronik #navigate #navlinks #chronikLink,
	body.kontakt #navigate #navlinks #kontaktLink,
	body.ueber #navigate #navlinks #uebersidde {
		font-weight: 500;
		font-size: 110%;
		background: url(../img/nav-dobisch.png) 100% 50% / 1em auto no-repeat;
		padding-right: 1.33em;
	}
	#main {
		grid-column: 1 / -1;
		grid-row: 3 / span 3;
	}
}

/* global footer */

footer#footer-grid::before {
	content: "";
	display: block;
	height: 6.5em;
	background:
		url(../img/footer-start.png) -10px 0 / auto 100% no-repeat,
		url(../img/footer-wita.png) 0 100% / auto 2em repeat-x,
		url(../img/footer-wita.png) 0 95% / auto 1.5em repeat-x;
	mix-blend-mode: darken;
}

@supports (mix-blend-mode: darken) {
	footer#footer-grid::before {
		background:
			url(../img/footer-start.png) -10px 0 / auto 100% no-repeat,
			url(../img/footer-wita.png) 0 100% / auto 2em repeat-x,
			url(../img/footer-wita.png) 0 95% / auto 1.5em repeat-x,
			linear-gradient(179.5deg, hsla(34deg, 38%, 99%, 1), hsl(25deg, 0%, 97%)) 0 0 / 100% 100%;
	}
}

/* Linki Spalte */

#footer-links {
	padding: 1em;
	color: inherit;
}

/* Mittleri Spalte */

#footer-mitti {
	padding: 1em;
}

#footer-mitti > .footer-merci > h4 {
	text-align: center;
	margin: 0 0 0.75em;
	font-family: "IM Fell English", Eczar, Georgia, serif;
	font-style: italic;
	line-height: 1.1;
}

#footer-mitti > .footer-social ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

#footer-mitti > .footer-social ul a {
	margin: 0 1ch;
}

#footer-mitti > .footer-social a img {
	max-height: 2.25em;
	filter: grayscale(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0.25));
	transition-duration: 100ms;
}

#footer-mitti > .footer-social a:hover img {
	filter: grayscale(0) drop-shadow(0.25em 0.25em 0.125em rgba(0, 0, 0, 0.25));
	transform: translate(-0.125em, -0.125em);
}

/* Rechte Spalte */

#footer-rechts {
	padding: 1em;
}

/* Desktop: gemeinsames Footer-Grid */

@media (min-width: 50em) {
	footer#footer-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 9em minmax(0, 1fr);
		grid-template-rows: 6.5em repeat(3, auto);
		column-gap: 2.5em;
		row-gap: 1em;
	}

	/* Dekorationsstreifen oben */
	footer#footer-grid::before {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* Jede Spalte nutzt dieselben drei Inhaltszeilen */
	footer#footer-grid > div {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: 2 / span 3;
		margin: 0;
		padding: 1em;
		min-width: 0;
		background-position:
			100% 40%,
			center;
	}

	#footer-links {
		grid-column: 1;
	}

	#footer-mitti {
		grid-column: 2;
	}

	#footer-rechts {
		grid-column: 3;
	}

	#footer-links > .footer-narreneschd {
		grid-row: 1 / -1;
		align-self: center;
	}

	#footer-mitti > .footer-merci {
		grid-row: 1;
	}

	#footer-mitti > .footer-social {
		grid-row: 2 / span 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#footer-rechts > .footer-copyright {
		grid-row: 1 / -1;
		align-self: center;
		text-align: right;
		font-size: smaller;
	}

	footer#footer-grid a[href] {
		white-space: normal;
	}
}

/* ################################################# */
/* DAS HIER LÖSCHEN WENN RICHTIGE SEITE ONLINE!! */
/* ################################################# */

#tempheader {
	grid-column: 1 / -1;
	grid-row: 1;
	min-height: 13em;
	position: relative;
	mix-blend-mode: darken;
}
#tempheader #skiplinks {
	position: absolute;
	bottom: 1.5vh;
	left: -51em;
	width: 10em;
}
#tempheader #skiplinks a {
	display: block;
	background: black;
	color: white;
	margin: 3px;
	padding: 0.25em;
	transition: 150ms;
}
#tempheader #skiplinks a:focus {
	background: #060;
}
#tempheader #skiplinks a:focus,
#tempheader #skiplinks a:focus ~ a {
	transform: translate(52em);
}
#tempheader #skiplinks:focus-within a {
	transform: translate(52em);
}
@media (max-height: 42em) {
	#tempheader #skiplinks {
		width: auto;
	}
	#tempheader #skiplinks a {
		display: inline-block;
	}
}

#tempheader h1 {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
#tempheader a[href="/"] {
	box-sizing: border-box;
	position: absolute;
	height: 97%;
	width: 100%;
	padding: 0;
	padding-right: 0.1em;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-family:
		IM Fell English,
		Eczar,
		Georgia,
		serif;
	font-style: italic;
	font-size: 2rem;
	font-weight: 100;
	text-decoration: none;
	color: #db5856;
	line-height: 1;
	opacity: 0.75;
}

/* Extrem schmale Bildschirme */

@media (min-width: 30em) {
	#tempheader {
		min-height: 9em;
	}
	#tempheader h1 {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 50%;
		top: 0;
		left: 50%;
		position: absolute;
	}
}
@media (min-width: 40em) {
	#tempheader {
		min-height: 16vw;
	}
	#tempheader a[href="/"] {
		font-size: 5vw;
		height: 100%;
	}
}

/* ################################################# */
/* DAS HIER LÖSCHEN WENN RICHTIGE SEITE ONLINE!! */
/* ################################################# */