/*
-----------------------------------------------
	www.petrafehrmann.com
 by Simon Malz www.lichtsignale.de
----------------------------------------------- */


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

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select {
    vertical-align: middle;
}

em, i {
	font-style: normal;
}


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

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

@font-face {
	font-family: "PF Orbiter";
	src: url("fonts/TASAOrbiter-Bold.woff2") format("woff2"),
	src: url("fonts/TASAOrbiter-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}


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

:root {
	--color-text: #141414;
	--spacing: 1.35em;
}

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: "PF Orbiter", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
	font-size: 17px;
	line-height: var(--spacing);
	letter-spacing: 0.005em;
	text-align: left;
}

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

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

main a:link, main a:visited {
	border-bottom: 1px solid var(--color-highlight);
}


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

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

i, em {
	font-style: normal;
}

h1, blockquote {
	font-weight: normal;
	font-size: 135%;
	letter-spacing: -0.01em;
	line-height: 1.1;
	position: relative;
	left: -1px;
}

h1 {
	display: inline-block;
}


/*		A U D I O
----------------------------------------------- */

div.essential_audio{position:relative;z-index:0;width:100%}div.essential_audio > div:nth-child(1) div{width:28px;height:28px;margin-top:-13px;border-radius:50%;background-color:var(--color-highlight)}div.essential_audio > div:nth-child(1) div:after{position:absolute;top:7%;left:7%;width:86%;height:86%}:root{--button-protrusion:4px}div.essential_audio > div:nth-child(1) div.off:after{content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><polygon fill='%23FFF' points='10,6.9 10,23.1 24,15' /></svg>")}div.essential_audio > div:nth-child(1) div.load:after{content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle opacity='0.64' fill='%23FFFFFF' cx='6.5' cy='18.5' r='2'/><circle opacity='0.76' fill='%23FFFFFF' cx='6.5' cy='11.5' r='2'/><circle opacity='0.88' fill='%23FFFFFF' cx='11.5' cy='6.5' r='2'/><circle fill='%23FFFFFF' cx='18.5' cy='6.5' r='2'/><circle opacity='0.16' fill='%23FFFFFF' cx='23.5' cy='11.5' r='2'/><circle opacity='0.28' fill='%23FFFFFF' cx='23.5' cy='18.5' r='2'/><circle opacity='0.4' fill='%23FFFFFF' cx='18.5' cy='23.4' r='2'/><circle opacity='0.52' fill='%23FFFFFF' cx='11.5' cy='23.4' r='2'/></svg>");animation:audio_load_rotate 1s infinite linear}@keyframes audio_load_rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}div.essential_audio > div:nth-child(1) div.play{background-color:var(--color-highlight)!important}div.essential_audio > div:nth-child(1) div.play:after{content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect fill='%23FFF' x='17' y='8' width='3' height='14' /><rect fill='%23FFF' x='10' y='8' width='3' height='14' /></svg>")}div.essential_audio > div:nth-child(1) div.drag{transition:left 0s!important}div.essential_audio > div:nth-child(1) div.error{background-color:rgba(0,0,0,0.35)!important}div.essential_audio > div:nth-child(1) div.error:after{content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M13.9,18.6c0-0.3,0-0.5,0-0.9c0-1.6,0.6-2.9,2.1-3.9l1.1-0.8c0.9-0.6,1.3-1.5,1.3-2.4c0-1.5-1-2.8-3-2.8c-2.2,0-3.1,1.6-3.1,3.2c0,0.2,0,0.4,0,0.5L10,11.9c-0.1-0.3-0.1-0.8-0.1-1.2c0-2.3,1.7-5.1,5.5-5.1c3.5,0,5.5,2.5,5.5,5c0,2-1.1,3.4-2.5,4.3l-1.2,0.8c-0.8,0.5-1.1,1.4-1.1,2.4c0,0.1,0,0.2,0,0.5H13.9z'/><path fill='%23FFF' d='M15,20.8c1,0,1.8,0.8,1.8,1.8S16,24.4,15,24.4c-1,0-1.8-0.8-1.8-1.8S14,20.8,15,20.8z'/></svg>")}div.essential_audio > div:nth-child(2){height:2px}div.essential_audio > div:nth-child(2):after{content:"";position:absolute;z-index:0;background-color:var(--color-text);top:0;left:0;width:100%;height:100%}div.essential_audio > div:nth-child(2) div{background-color:var(--color-text);opacity:0.5;mix-blend-mode:multiply}div.essential_audio > div:nth-child(3){height:18px;margin-top:-8px}div.essential_audio,div.essential_audio *{user-select:none!important;-webkit-user-select:none!important;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:auto}div.essential_audio *:focus{outline:none}div.essential_audio > div:nth-child(1) div{position:absolute;top:0;left:0;cursor:pointer}div.essential_audio > div:nth-child(1){position:absolute;z-index:3;height:0;top:0;left:calc(var(--button-protrusion) * -1);width:calc(100% + (2 * var(--button-protrusion)))}div.essential_audio > div:nth-child(2){position:relative;width:100%;overflow:hidden}div.essential_audio > div:nth-child(2) div{position:absolute;z-index:1;width:0;height:100%;top:0;left:0;transition:width 0.5s}div.essential_audio > div:nth-child(3){position:absolute;z-index:2;width:100%;top:0;left:0}


/*		H E A D E R
----------------------------------------------- */

.wrapper {
	margin-left: calc(var(--spacing) * 1);
	margin-right: calc(var(--spacing) * 1);
}

header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 900;
	width: 100%;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

header .wrapper {
	padding: calc(var(--spacing) * 0.7) 0 calc(var(--spacing) * 0.8) 0;
}

header small {
	display: none;
}

#mobilenav {
	position: fixed;
	z-index: 9990;
	right: calc(var(--spacing) * 1);
	top: calc(var(--spacing) * 0.8);
	width: 20px;
	height: 20px;
	cursor: pointer;
	text-align: right;
}

#mobilenav svg {
	width: auto;
	height: 12px;
	fill: var(--color-text);
}

#mobilenav em, #mobilenav.active strong {
	display: none;
}

#mobilenav.active em, #mobilenav strong {
	display: block;
}

#menu {
	display: none;
	width: 100vw;
	background: #fff;
}

header nav ul {
	padding: calc(var(--spacing) * 1) 0 0 0;
}

header nav li {
	list-style: none;
}

header nav a {
	padding: calc(var(--spacing) * 0.25) 0 calc(var(--spacing) * 0.25) 0;
	display: block;
}

header a:link, header a:visited, footer a:link, footer a:visited {
	color: var(--color-text);
}

header a:hover, header a:active, footer a:hover, footer a:active {
	color: var(--color-highlight);
}

header .active, footer .active span {
	color: var(--color-highlight) !important;
	cursor: default;
	font-weight: bold;
}

header a.active:hover, header a.active:active {
	color: var(--color-highlight) !important;
}


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

main {
	margin-top: calc(var(--spacing) * 4);
}

main h2, main p, main ul, main blockquote {
	margin-bottom: var(--spacing);
}

main h2, main h3 {
	color: var(--color-highlight);
}

main blockquote {
	text-indent: -11px;
}

main blockquote:before {
	content: "»";
	color: var(--color-highlight);
	font-weight: bold;
	margin-left: -2px;
	margin-right: 2px;
}

main blockquote:after {
	content: "«";
	color: var(--color-highlight);
	font-weight: bold;
}

main ul {
	position: relative;
	margin-top: calc(var(--spacing) * -1);
	margin-left: calc(var(--spacing) * 0.75);
}

main ul + ul {
	margin-top: 0;
}

main h2 + ul {
	padding-top: var(--spacing);
}

main li {
	list-style: none;
	text-indent: -15px;
}

main li:before {
	content: "*";
	padding-right: 5px;
	position: relative;
	top: 4px;
	color: var(--color-highlight);
}

.essential_audio {
	margin-top: calc(var(--spacing) * 2)
}


/*		F O O T E R
----------------------------------------------- */

footer {
	padding: calc(var(--spacing) * 3) 0 var(--spacing) 0;
}


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

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

#extra {
	float: right;
	width: 40%;
	margin-left: 5%;
}

article {
	margin-right: 20%;
}

}


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

header {
	position: absolute;
	left: 0;
	top: 0;
	width: 20%;
	background: transparent;
	box-shadow: none;
}

#mobilenav {
	display: none;
}

#menu {
	display: block !important;
	width: auto;
	background: transparent;
	margin-top: calc(var(--spacing) * 8);
}

header nav a {
	padding: calc(var(--spacing) * 0.125) 0 calc(var(--spacing) * 0.125) 0;
	display: block;
}

main {
	margin-left: 30%;
	margin-top: calc(var(--spacing) * 7);
}

#extra {
	float: right;
	width: 40%;
	margin-left: 5%;
	margin-top: calc(var(--spacing) * -6.25);
}

article {
	margin-right: 20%;
}

h1 {
	font-size: 300%;
	letter-spacing: -0.025em;
	left: -3px;
	top: -5px;
}

h1 small {
	display: block;
	font-size: 1rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	margin-left: 2px;
}

main {
	position: relative;
}

main::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 5px;
	width: 1px;
	height: 300px;
	background-color: var(--color-highlight);
}

footer {
	padding-top: calc(var(--spacing) * 5);
}

#inner {
	position: relative;
}

#inner::after {
	content: "";
	position: absolute;
	left: calc(30% - 20px);
	top: 5px;
	width: 1px;
	height: 75px;
	background-color: var(--color-highlight);
}

}


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

:root {
	--spacing: 1.4em;
}

body {
	font-size: 22px;
	letter-spacing: 0.005em;
}

h1 {
	font-size: 400%;
	letter-spacing: -0.05em;
	left: -6px;
	top: -10px;
}

h1 small {
	font-size: 22px;
	letter-spacing: 0.005em;
	margin-left: 5px;
}

blockquote {
	font-size: 200%;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

main blockquote {
	text-indent: -21px;
}

main ul {
	margin-left: calc(var(--spacing) * 0.5);
}

main::before {
	left: -30px;
}


#inner::after {
	left: calc(30% - 30px);
}

}


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

header {
	width: 100%;
	z-index: 1;
}

main {
	z-index: 2;
}

.wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 1338px;
}

}