@font-face {
	font-family: 'headline-italic';
	src: url(../woff2/Bitter-BoldItalic.woff2) format('woff2');
}

@font-face {
	font-family: 'headline';
	src: url(../woff2/Bitter-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'paragraph';
	src: url(../woff2/Bitter-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'paragraph-bold';
	src: url(../woff2/Bitter-Bold.woff2) format('woff2');
}



/* CONSIDER: REVISIT: Additional application of vars to ::selection due to this bug (Chromium only, 2023-08-12): vars from :root are not recognized within ::selection */
:root,
::selection {
	--atom: 1em;
	--golden-ratio: 1.618;
	--primary-color: #008000;

	--nav-text-color: #fff;
	--nav-height: calc( var(--atom) * 3 );

	--line-height: 1.333;
	--article-text-color: #000;
	--link-underline-heft: calc( var(--atom) * .05 );
	--nav-link-underline-heft: calc( var(--link-underline-heft) * 2 );

	/* ARBITRARY TWEAK: Max width of articles (actual page content) - currently: matching nav width */
	--content-width-multiplier: 35.4;
}



/*
	THOUGHTS:
	- FIRST, adjust body { font-size: max(bla, blub); } to taste
	- ONLY THEN ... (the order of executing the following steps is irrelevant)
		- tweak the width for the cover images
		- set the media query breakpoint pixel value
*/
body {
	/* font-size: max( 133%, 1.333vw ); */
	font-size: 133%;
}

*::selection {
	color: #fff !important;
	background: var(--primary-color) !important;
}



/* --- NAV  --- */

nav {
	position: fixed;
	top: 0;
	width: 100%;
	height: var(--nav-height);
	color: var(--nav-text-color);
	background: var(--primary-color);
	user-select: none;
}

nav ul {
	text-align: center;
}

nav li {
	display: inline;
}
nav li:not(:last-of-type) {
	margin-right: calc( var(--atom) * var(--golden-ratio) );
}

.nav-text {
	cursor: pointer;
	white-space: nowrap;
}

/* TODO: HIER SPIELT DIE MUSIK in Sachen vertikale Zentrierung der Nav-Textschnipsel in ihren jeweiligen Containern !!! */
.nav-text span {
	padding: calc( var(--atom) * .667 ) 0 calc( var(--atom)* .333 ) 0;
    display: inline-block;
}

.nav-text:hover span {
	border-bottom: var(--nav-link-underline-heft) dotted var(--nav-text-color);
}

nav > :is( input, label ) {
	display: none;
}

nav > input ~ label[for="hamburger"] i {
	position: relative;
	padding-left: calc( var(--atom) + ( calc( var(--atom) / var(--golden-ratio) ) ) );
}
/* META: Probably the best hamburger icon solution :) */
nav > input ~ label[for="hamburger"] i::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--atom);
	background: linear-gradient(
		var(--nav-text-color) 15%,
		transparent 15% 40%,
		var(--nav-text-color) 40% 60%,
		transparent 60% 85%,
		var(--nav-text-color) 85% 100%
	);
}
nav > input:checked ~ label[for="hamburger"] span {
	display: none;
}

body > input[type="radio"] {
	display: none;
}



/* --- MEDIA QUERIES --- */

@media screen and ( max-width: 770px ) {

	/* TODO: Clarify: What purpose was this supposed to serve? */
	/* nav {
		padding: unset;
	} */

	label[for="hamburger"] {
		display: block;
		padding: calc( var(--atom) * .667 ) 0 0 var(--atom);
		cursor: pointer;
	}

	nav ul {
		background: var(--primary-color);
		position: fixed;
		top: var(--nav-height);
		display: none;
		text-align: left;
	}

	nav > input:checked ~ ul {
		display: unset;
	}

	nav ul li {
		display: block;
		margin: 0 !important;
		border-top: 1px dotted #000;
	}

	nav ul label {
		display: block;
		padding: 0 var(--atom);
		height: var(--nav-height);
	}
	nav ul label span {
		border-bottom: none !important;
	}

	/* FLUFF ... :has() doesn't work in Firefox and color-mix is quite recent as of 2023-08-11 - certainly not a big deal */
	nav ul li:hover,
	#home-switch:checked ~ nav li:has( [for="home-switch"] ),
	#baarss-switch:checked ~ nav li:has( [for="baarss-switch"] ),
	#imprint-switch:checked ~ nav li:has( [for="imprint-switch"] ),
	#privacy-switch:checked ~ nav li:has( [for="privacy-switch"] ) {
		/* Effectively darkening: Mix the corporate design colour with black, note the percentage */
		background: color-mix(in srgb, var(--primary-color), #000 20%);
	}
}

/* CONSIDER: SOMETHING WITH ... */
/* @media screen and (not (hover)) {
	[...]
} */



/* --- SWITCHING FUNCTIONALITY --- */

/* TABULA RASA */
body > input[type="radio"]:checked ~ article {
	display: none;
}

/* SWITCHING TOGGLES */
#home-switch:checked ~ #home,
#baarss-switch:checked ~ #baarss,
#imprint-switch:checked ~ #imprint,
#privacy-switch:checked ~ #privacy {
	display: block;
}

	#home-switch:checked ~ nav [for="home-switch"] span,
	#baarss-switch:checked ~ nav [for="baarss-switch"] span,
	#imprint-switch:checked ~ nav [for="imprint-switch"] span,
	#privacy-switch:checked ~ nav [for="privacy-switch"] span {
		border-bottom: var(--nav-link-underline-heft) solid var(--nav-text-color);
	}

	/* FLUFF */
	#home-switch:checked ~ nav [for="home-switch"]:hover,
	#baarss-switch:checked ~ nav [for="baarss-switch"]:hover,
	#imprint-switch:checked ~ nav [for="imprint-switch"]:hover,
	#privacy-switch:checked ~ nav [for="privacy-switch"]:hover {
		cursor: unset;
	}



/* --- HEADLINES --- */

h1, h2 {
	font-family: 'headline-italic', serif;
	font-size: calc( var(--atom) * 2 );
	text-align: center;
	padding: var(--atom) 0;
}



/* --- PAGE CONTENT --- */

article {
	line-height: var(--line-height);
	margin: var(--nav-height) auto 0 auto;
	padding: 0 var(--atom) var(--atom) var(--atom);
	max-width: calc( var(--atom) * var(--content-width-multiplier) );
	color: var(--article-text-color);
}

article > :last-child {
	margin-bottom: 0;
}

article h3,
label {
	font-family: 'headline', serif;
}

article h4 {
	font-family: 'paragraph', serif;
}

article :is( p, ul, ol, hr ) {
	font-family: 'paragraph', serif;
	margin-bottom: 1lh;
}
article p.pull {
	margin-bottom: calc( var(--atom) * .5 );
}

article h3 + :is( h4, p, ul ),
article h4 + p {
	margin-top: calc( var(--atom) * .5 );
}

article :is( ul, ol ) li {
	margin-left: var(--atom);
}
article ul li {
	list-style-type: disc;
}
article ol li {
	list-style-type: lower-latin;
}

img {
	user-select: none;
}

hr {
	border-top: var(--link-underline-heft) dotted var(--article-text-color);
}

.bold {
	font-family: 'paragraph-bold';
}

.mail {
	unicode-bidi: bidi-override;
	direction: rtl;
	user-select: none;
	white-space: nowrap;
}

.mail span {
	display: none;
}

ul.address li {
	list-style-type: none;
	margin-left: 0;
}

a {
	padding-bottom: var(--link-underline-heft);
	border-bottom: var(--link-underline-heft) dotted;
}

a:hover {
	border-bottom: var(--link-underline-heft) solid;
}