@font-face{font-display:swap; font-family:'Montserrat'; font-style:normal; font-weight:700; src:url('fonts/Montserrat/Montserrat-v23-700-Bold.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Montserrat'; font-style:italic; font-weight:700; src:url('fonts/Montserrat/Montserrat-v23-700-Bold-Italic.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Montserrat'; font-style:normal; font-weight:800; src:url('fonts/Montserrat/Montserrat-v12-800-ExtraBold.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Montserrat'; font-style:italic; font-weight:800; src:url('fonts/Montserrat/Montserrat-v12-800-ExtraBold-Italic.woff') format('woff'); }

@font-face{font-display:swap; font-family:'Mulish'; font-style:normal; font-weight:500; src:url('fonts/Mulish/Mulish-500-Medium.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:italic; font-weight:500; src:url('fonts/Mulish/Mulish-500-Medium-Italic.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:normal; font-weight:600; src:url('fonts/Mulish/Mulish-600-SemiBold.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:italic; font-weight:600; src:url('fonts/Mulish/Mulish-600-SemiBold-Italic.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:normal; font-weight:700; src:url('fonts/Mulish/Mulish-700-Bold.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:italic; font-weight:700; src:url('fonts/Mulish/Mulish-700-Bold-Italic.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:normal; font-weight:800; src:url('fonts/Mulish/Mulish-800-ExtraBold.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:italic; font-weight:800; src:url('fonts/Mulish/Mulish-800-ExtraBold-Italic.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:normal; font-weight:900; src:url('fonts/Mulish/Mulish-900-Black.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Mulish'; font-style:italic; font-weight:900; src:url('fonts/Mulish/Mulish-900-Black-Italic.woff') format('woff'); }


:root {
	--link-hover-text-color: #fff;
	--link-hover-bg-color: #458;
	--main-line-height: 1.5rem;
	--screen-padding-sides: 1rem;
}
@media screen and (max-width: 33rem){
	:root {
		--main-line-height: 1.425rem;
		--screen-padding-sides: 0.75rem;
	}
}
@media screen and (max-width: 28rem){
	:root {
		--main-line-height: 1.35rem;
		--screen-padding-sides: 0.5rem;
	}
}

* {
	-moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box;
	margin: 0;   padding: 0;   font-size: 1em;
}

html {
	height: 100%;
	font-size: 1rem;
}

body {
	color: #000;   background-color: #fff;
	display: grid;   grid-template-rows: max-content max-content auto max-content;   gap: 0;
	width: 100%;   min-height: 100%;
	overflow-x: hidden;   overflow-y: scroll;
}
@media screen and (max-width: 39rem){
	body {
		grid-template-rows: max-content auto max-content;
	}
}



/* Header ================================================================================================================================================================================ */

[id="header"] {
	padding: 4.2rem var(--screen-padding-sides) 0;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
	font-size: 2.7rem;
}
@media screen and (max-width: 37rem){ [id="header"] { font-size: 2.55172413793rem; }}	
@media screen and (max-width: 36rem){ [id="header"] { font-size: 2.48275862069rem; }}	
@media screen and (max-width: 35rem){ [id="header"] { font-size: 2.41379310345rem; }}	
@media screen and (max-width: 34rem){ [id="header"] { font-size: 2.34482758621rem; }}	
@media screen and (max-width: 33rem){ [id="header"] { font-size: 2.27586206897rem; }}	
@media screen and (max-width: 32rem){ [id="header"] { font-size: 2.20689655172rem; }}	
@media screen and (max-width: 31rem){ [id="header"] { font-size: 2.13793103448rem; }}	
@media screen and (max-width: 30rem){ [id="header"] { font-size: 2.06896551724rem; }}	
@media screen and (max-width: 29rem){ [id="header"] { font-size: 2rem; }}	
@media screen and (max-width: 28rem){ [id="header"] { font-size: 1.93103448276rem; }}	
@media screen and (max-width: 27rem){ [id="header"] { font-size: 1.86206896552rem; }}	
@media screen and (max-width: 26rem){ [id="header"] { font-size: 1.79310344828rem; }}	
@media screen and (max-width: 25rem){ [id="header"] { font-size: 1.72413793103rem; }}	
@media screen and (max-width: 24rem){ [id="header"] { font-size: 1.65517241379rem; }}	
@media screen and (max-width: 23rem){ [id="header"] { font-size: 1.58620689655rem; }}	
@media screen and (max-width: 22rem){ [id="header"] { font-size: 1.51724137931rem; }}	
@media screen and (max-width: 21rem){ [id="header"] { font-size: 1.44827586207rem; }}	
@media screen and (max-width: 20rem){ [id="header"] { font-size: 1.37931034483rem; }}	
@media screen and (max-width: 19rem){ [id="header"] { font-size: 1.31034482759rem; }}	
@media screen and (max-width: 18rem){ [id="header"] { font-size: 1.24137931034rem; }}	
@media screen and (max-width: 17rem){ [id="header"] { font-size: 1.1724137931rem; }}	
@media screen and (max-width: 16rem){ [id="header"] { font-size: 1.10344827586rem; }}	


[id="header"]
h1 {
	display: block;
	margin: 0 auto 0;
	max-width: 36rem;
}

[id="header"]
h1 > a {
	margin: 1.7em auto 0;
	font-weight: 800;
	text-decoration: none;   text-transform: uppercase;	
	color: black;
}

[id="header"]
h1 .title {
	display: block;
	margin-bottom: 0.1em;   margin-left: -0.15em;
	line-height: 0.8em;	 white-space: nowrap;
	display: flex;   justify-content: space-between;
}

[id="header"]
h1 .the-thing {
	display: none;
}

[id="header"]
h1 small {
	display: block;
	margin-top: 0em;   padding-bottom: 0.2em;
	font-size: 0.35em;   font-weight: 800;   line-height: 0.9em;
	display: flex;   justify-content: space-between;
}



/* Skip to Main ======================================================================================================================================================================== */

[id="skip-to-main"] {
	position: fixed;   left: -100%;   top: 0;   z-index: 3;
	font-size: 0;
	width: 100%;
	text-align: center;
	
}
[id="skip-to-main"]:focus {
	left: 0;
	width: 100%;
	font-size: 1rem;   padding: 0.2em;
	color: black;   background-color: #fc0;
}



/* Menu On/Off Switch ================================================================================================================================================================ */

[id="menu-on-off-switch"],
[id="menu-on-off-switch"] + label {
	display: none;
}
@media screen and (max-width: 39rem){
	[id="menu-on-off-switch"] + label {
		display: block;
		position: fixed;   right: 0.8em;   top: 0.8em;    z-index: 3;
		display: block;   width: 3em;   height: 3em;
		
		background-image: url("images/buttons.svg");   background-repeat: no-repeat;
		background-position: 0 0rem;   background-size: 33rem 33rem;
		cursor: pointer;
	}
	[id="menu-on-off-switch"] + label:hover, [id="menu-on-off-switch"]:focus + label {
		background-position: 0 -3.3rem;
	}
	[id="menu-on-off-switch"]:not(:checked) ~ [id="nav"] {
		display: none;
	}	
	[id="menu-on-off-switch"]:checked ~ [id="nav"] {
		display: block;
	}
}



/* Navigation ======================================================================================================================================================================== */

[id="nav"] {
	margin-top: 3.3rem;
	text-align: center;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
}
[id="nav"]
ul,
[id="nav"]
ul > * {
	display: inline-block;
	list-style-type: none;
	margin-left: 0;
}
[id="nav"] > ul {
	padding: 0 0.5rem 0;
}
[id="nav"] li {
}
[id="nav"]
a {
	padding: 0.1rem 0.5rem 0.2rem;
	color: black;
	font-size: 1.1rem;   letter-spacing: 0.05rem;   font-weight: 700;
	text-decoration: none;   white-space: nowrap;
}
[id="nav"]
a:hover,
[id="nav"]
a:focus {
	text-decoration: none;
	color: var(--link-hover-text-color);   background-color: var(--link-hover-bg-color);
	outline: 0.2rem solid var(--link-hover-bg-color);
}
[id="nav"]
[class^="open-"]:not(:hover):not(:focus) > a {
	text-decoration: underline;
}
[id="nav"]
[class^="open-"]:not(.open-1):not(:hover):not(:focus) > a  {
	text-decoration-style: dotted;
}

@media screen and (max-width: 39rem){
	[id="nav"] {
		position: absolute;
	}
	[id="nav"]
	ul,
	[id="nav"]
	ul > * {
		display: block;
	}
	[id="nav"] > ul {
		position: fixed;   top: 0rem;   z-index: 2;
		width: 100%;
		padding: 1.5rem 0 2rem;
		background-color: white;
	}
	[id="nav"]
	li + li {
		margin-left: 0rem;
	}
	[id="nav"]
	a {
		display: block;
		padding-left: 1rem;
		text-align: left;
	}		
	[id="nav"]
	label {	/* durchsichtige dunkle Klick-Fläche unter Menü */
		display: block;
		position: fixed;   top: 0;   left: 0;   z-index: 1;
		height: 100%;   width: 100%;
		background-color: rgba(0,0,0,0.7);
	}
}



/* Main Section (Content) ================================================================================================================================================================ */

[id="main"] {
	position: relative;
	margin-top: 3.5rem;
	padding: 0.5rem var(--screen-padding-sides) 5rem;
	font-size: 1.05rem;   line-height: var(--main-line-height);
	font-family: Mulish, Verdana, Geneva, sans-serif;   font-weight: 500;
}
@keyframes targeting {
	from {color: #fd0;}
	to {color: black;}
}


[id="main"] > * {
	margin-top: 1.5rem;
	margin-left: auto;   margin-right: auto;
	max-width: 36rem;
	display: block;
}
[id="main"] > *:first-child {
	margin-top: 0;
}
[id="main"] > h2.screen-reader-only + * {
	margin-top: 0;
}

[id="main"]
a {
	color: #238;
	text-decoration-color: #fb8;   text-underline-offset: 0.05em;   text-decoration-thickness: 0.2em;   text-decoration-skip-ink: none;
}

[id="main"] a:hover,
[id="main"] a:focus {
	text-decoration: none;
	color: var(--link-hover-text-color);   background-color: var(--link-hover-bg-color);   border-color: var(--link-hover-bg-color);
	outline: 0.3rem solid var(--link-hover-bg-color);
}
[id="main"]
a:hover *,
[id="main"]
a:focus * {
	text-decoration: none;
	color: var(--link-hover-text-color);   background-color: var(--link-hover-bg-color);   border-color: var(--link-hover-bg-color);
}
[id="main"] a[href*=".gif"]:has( img ),
[id="main"] a[href*=".jpg"]:has( img ),
[id="main"] a[href*=".png"]:has( img ) {
	outline: none;
}
[id="main"] a[href*=".gif"]:has( img ) img,
[id="main"] a[href*=".jpg"]:has( img ) img,
[id="main"] a[href*=".png"]:has( img ) img {
	background-color: black;   border-color: black;
}
[id="main"]
ol > li {
	margin-left: 2rem;
}

[id="main"]
dl {
	list-style: disc;
}

[id="main"]
dt {
	margin-top: 0.75rem;
}

[id="main"]
ul {
	list-style: disc;
}
[id="main"]
ul > li {
	margin-left: 1.2rem;
}

ul.previews {
	list-style-type: none;
}
ul.previews > li {
	margin-left: 0;
}
ul.previews a {
	display: block;
}
ul.previews li:hover {
	color: var(--link-hover-text-color);   background-color: var(--link-hover-bg-color);
	outline: 0.3rem solid var(--link-hover-bg-color);
}
ul.previews img {
	max-height: 12rem;   object-fit: cover;
}
ul.previews.mini img {
	max-height: 6rem;
}

ul.gallery {
	display: flex;   flex-wrap: wrap;   gap: 0.75rem 0.75rem;  justify-content: center;
	max-width: 96rem;
}
ul.gallery > li {
	min-width: 10rem;
	line-height: 0;
}
ul.gallery.mini {
	max-width: 36rem;
	gap: 0.3rem 0.4rem;
}
ul.gallery.mini > li {
	flex-grow: 1;
	min-width: 4rem;   max-width: 8rem;
}
ul.gallery.mini img {
	max-height: 4rem;
	border-width: 0.2rem;
}
[id="main"]
abbr {
	text-decoration: underline dotted;
}

[id="main"]
blockquote {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	border-left: 1.5rem solid #eee;
	font-size: 0.95rem;
}

[id="main"]
cite {
	font-style: italic;
}

[id="main"]
code {
	display: block;
	padding: 0.3rem 0.5rem 0.5rem;
	background-color: #f3f3fa;
}

[id="main"]
em, i {
	font-style: italic;
}

[id="main"]
h2 {
	margin-bottom: 1.5rem;
	font-family: Montserrat, Verdana, Geneva, sans-serif;   font-weight: 700;
	line-height: 1em;	
	font-size: 1.5rem;   letter-spacing: 0.01em;
}

[id="main"]
h2:not(:first-child) {
	margin-top: 3rem;
}

[id="main"]
h3 {
	margin-top: 3rem;
	font-family: Montserrat, Verdana, Geneva, sans-serif;   font-weight: 700;
	font-size: 1.2rem;   letter-spacing: 0.03em;
	line-height: 1em;
}
[id="main"]
h3:target {
	
	-webkit-animation-name: targeting;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-timing-function: cubic-bezier(1,0,0,1);
	animation-name: targeting;
	animation-duration: 0.3s;
	animation-timing-function: cubic-bezier(1,0,0,1);
}

[id="main"]
h4 {
	padding-top: 0.75rem;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
	font-weight: 700;   letter-spacing: 0.03em;
}

[id="main"]
h4:target {
	
	-webkit-animation-name: targeting;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-timing-function: cubic-bezier(1,0,0,1);
	animation-name: targeting;
	animation-duration: 0.3s;
	animation-timing-function: cubic-bezier(1,0,0,1);
}

[id="main"]
h5 {
	padding-top: 0.75rem;
	font-weight: 700;   letter-spacing: 0.03em;
}

[id="main"]
h6 {
	padding-top: 0.75rem;
	font-weight: 700;   letter-spacing: 0.03em;
}

[id="main"]
p {
	margin-top: 1.5rem;
}
[id="main"]
p + p {
	margin-top: 0.495rem;
}
[id="main"]
h3 + p {
	margin-top: 0.75rem;
}

[id="main"]
pre {
	font-size: 1rem;   font-family: 'Courier New', Courier, monospace;
	line-height: 1.2em;
	white-space: pre-wrap;
}

@media screen and (max-width: 33rem) {
	[id="main"]
	pre {
		font-size: 0.9rem;
		font-weight: bold;
	}
}
@media screen and (max-width: 28rem) {
	[id="main"]
	pre {
		font-size: 0.8rem;
	}
}

[id="main"]
q:before {
	content: "»";
}

[id="main"]
q:after {
	content: "«";
}

[id="main"]
small {
	font-size: 0.8em;
}

[id="main"]
strong, b {
	font-weight: 700;
}

[id="main"]
sup {  	vertical-align: top;
	font-size: 0.8em;   line-height: 1em;
}

[id="main"]
sup a {
	text-decoration: none;
}
[id="main"]
aside {
	background-color: #fed;
	font-size: 0.85em;
	line-height: 1.1rem;
	padding: 0.5rem;
}
@media screen and (min-width: 66rem){
	[id="main"]
	aside {
		position: absolute;
		display: grid;
		grid-template-columns: 1fr 36rem 1fr;
		gap: 2rem;
		grid-auto-rows: min-content;
		margin-top: 0;
	}
	[id="main"]
	aside > * {
		grid-column: 3;
	}
}

[id="main"]
audio {
	width: 100%;
}

[id="main"]
figure {
	display: table;
}

[id="main"]
figure a {
	display: block;
	line-height: 0;
}

[id="main"]
figcaption {
	display: table-caption;   caption-side: bottom;
	margin-top: 0.3rem;
	font-weight: 700;
	font-size: 0.95rem;   line-height: 1.35rem;
}

[id="main"]
img {
	width:100%;
	max-height: 90vh;
	border: 0.2rem solid black;
}

[id="main"]
.credits {
	font-variant: small-caps;   font-size: 0.9em;   font-weight: 600;
}

[id="main"]
p.credits {
	margin-bottom: 0.75rem;
}

[id="main"] .da {
	display: inline;
}
[id="main"]
[hidden] {
	display: none;
}

[id="main"]
.lyric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

[id="main"]
.lyric h2 {
	text-align: center;
}

[id="main"]
.lyric-stanza :first-child {
	margin-top: 0rem;
}

[id="main"]
.screen-reader-only {	
	position: absolute;
	top: auto;   left: -10000px;
	width: 0;   height: 0;
	overflow: hidden;
}

[id="main"]
.tech-info {
	display: block;
	font-style: italic;   font-weight: 500;
}

[id="main"]
.typo-capitals {
	font-size: 0.95em;
}

[id="main"] .wech {
	display: none;
}



/* Series Navigation ================================================================================================================================================================ */

[id="series-navigation"] {
	margin: 0;
}

[id="series-navigation"]
li {
	margin-left: 0;
	list-style-type: none;
}

[id="series-navigation"]  li:last-child {
	display: none;
}

[id="series-navigation"]
a {
	display: block;   font-size: 0em;
	position: fixed;   z-index: 5;
	width: 3rem;   height: 3rem;
	
	background-image: url("images/buttons.svg");   background-repeat: no-repeat;
	background-size: 33rem 33rem;   background-position-y: 0rem;
}

[id="series-navigation"]
li:nth-child(1) a {
	right: 1rem;   top: 49vh;
	margin-top: -1.5rem;
	background-position-x: -13.2rem;
}
[id="series-navigation"]
li:nth-child(2) a {
	left: 1rem;   top: 49vh;
	margin-top: -1.5rem;
	background-position-x: -9.9rem;
}

@media screen and (max-width: 39rem){
	[id="series-navigation"]
	li:nth-child(1) a {
		right: 0.8rem;   top: 5.3rem;
	}
	[id="series-navigation"]
	li:nth-child(2) a {
		left: auto;   right: 0.8rem;   top: 8.3rem;
	}
}

[id="series-navigation"]
a:hover,
[id="series-navigation"]
a:focus {
	background-position-y: -3.3rem;
	background-color: rgba(0,0,0,0);   outline: none;
}



/* Footer ======================================================================================================================================================================== */

[id="footer"] {
	position: relative;   bottom: 0;
	width: 100%;
	padding-bottom: 2rem;
	text-align: center;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
}

[id="footer"]
a {
	padding: 0.1rem 0.35rem 0.15rem;
	color: #aaa;
	font-size: 0.9rem;
	text-decoration: none;   font-weight: 700;
}

[id="footer"]
a:hover,
[id="footer"]
a:focus {
	text-decoration: none;
	color: var(--link-hover-text-color);   background-color: var(--link-hover-bg-color);
	outline: 0.2rem solid var(--link-hover-bg-color);
}

[id="footer"]
ul {
	display: inline-block;
	list-style-type: none;
}
[id="footer"]
li {
	display: inline-block;
}



/* End of Standard ======================================================================================================================================================================== */

body.content-image {
	background-color: #ccc;
	--link-hover-bg-color: #333;
}

body.content-image figure {
	max-width: 100%;
}

body.content-image-gallery {
	background-color: #ccc;
}

#page-home figure:first-of-type img {
	border: none;
}

@media screen and (min-width: 19rem) {
	#page-musikstuecke-the-ballad-of-a-dishwasher .lyric-stanza {
		margin-left: 2rem;	
	}
}
@media screen and (min-width: 21rem) {
	#page-musikstuecke-the-ballad-of-a-dishwasher .lyric-stanza {
		margin-left: 4rem;	
	}
}

@media screen and (min-width: 27rem) {
	#page-musikstuecke-dont-say-you-dont-know .lyric-stanza {
		margin-left: 2.5rem;	
	}
}

@media screen and (min-width: 29rem) {
	#page-musikstuecke-how-much-i-love-you .lyric-stanza {
		margin-left: 2rem;	
	}
}

@media screen and (max-width: 37rem) {
	#page-musikstuecke-jetzt-muss-ich-lieben .title-extension::before {
		content: "\A";
		white-space: pre;
	}
}
@media screen and (min-width: 32rem) {
	#page-musikstuecke-jetzt-muss-ich-lieben .lyric-stanza {
		padding-left: 3rem;
	}
}

@media screen and (min-width: 27rem) {
	#page-musikstuecke-uncertainty .lyric-stanza {
		margin-left: 3rem;
	}
}

@media screen and (min-width: 34rem) {
	#page-musikstuecke-what-do-they-know .lyric-stanza {
		margin-left: 4rem;	
	}
}


body[id^="page-star-wars-game"] {
	background-color: #229;
	color: #ffa;
	--link-hover-text-color: #000;
	--link-hover-bg-color: #fe3;
}
[id^="page-star-wars-game"] [id="header"] h1 > a,
[id^="page-star-wars-game"] [id="main"] h2,
[id^="page-star-wars-game"] [id="main"] h3 {
	color: #ff5;
}
@media screen and not (max-width: 39rem){
[id^="page-star-wars-game"]	[id="nav"] a:not(:hover) {
		color: #ff9;
	}
}
[id^="page-star-wars-game"] [id="main"] a:not(:hover) {
	color: #ffa;
	text-decoration-color: #ffa;
	text-decoration-thickness: 0.05em;   text-underline-offset: 0.1em;
}
[id^="page-star-wars-game"] [id="main"] code {
	color: #ff0;
	background-color: #000;
}
[id^="page-star-wars-game"] figcaption {
	color: #ff3;
}