* {
	-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;
	background-color: #ffffee;
}

body {
	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;
	}
}


/*---------------------------------------------------------------------------------------------------------------------*/

#main {
	margin-top: 3.25rem;
	padding: 0.75rem 1rem 5rem;
	font-size: 1.05rem;   line-height: 1.5rem;
	font-family: 'Mulish', Verdana, sans-serif;   font-weight: 500;
}
@media screen and (max-width: 33rem){
	#main {
		padding-left: 0.85rem;   padding-right: 0.85rem;
	}
}
@media screen and (max-width: 24rem){
	#main {
		line-height: 1.425rem;
		padding-left: 0.7rem;   padding-right: 0.7rem;
	}
}



#main p + * {
	margin-top: 1.125rem; 
}
#main p + p {
	margin-top: 0;
}


#main a {
	color: #238;
	text-decoration-color: #8ad;   text-underline-offset: 0.1em;   text-decoration-thickness: 0.1em;
}
#main h3 a {
	color: #000;
	text-decoration-color: #bcf;
}
#main a.mixed-content {
	display: block;
	margin: 0.75rem auto 0;
	color: black;   text-decoration: none;
}

#main a * {
}
#main a:hover,      #main a:focus,      #main a:hover *,      #main a:focus *,
#main .gallery li:hover > a, #main .gallery li:focus > a, #main .gallery li:hover > a *, #main .gallery li:focus > a {
	text-decoration: none;
	color: white;   background-color: #458;   border-color: #458;
}
#main a:hover,      #main a:focus,
#main .gallery li:hover > a, #main .gallery li:focus > a {
	outline: 0.3rem solid #458;
}

#main audio {
	width: 100%;
	margin-top: 1.5rem;   margin-bottom: 1.5rem;
}
#main p + audio {
	margin-top: 3rem;
}

#main h2, #main h3 {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	font-family: Montserrat, Verdana, Geneva, sans-serif;   font-weight: 700;
}

#main h2, #main a h2 {
	padding-bottom: 0.1rem;
	margin-bottom: 1.5rem;
	line-height: 1.2em;	
	font-size: 1.5rem;   letter-spacing: 0.01em;
}
#main h2.auto {
	display: none;
}

#main h3, #main a h3 {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	margin-top: 3rem;   padding-top: 0.75rem;
	line-height: 1em; 
	font-size: 1.2rem;   font-weight: 700;   letter-spacing: 0.03em;
	text-decoration: none;
	color: black;
}
#main h2 + h3 {
	padding-top: 0;
}
#main h3 + ul {
	margin-top: 0.75rem;
}

#main h4, #main h5, #main h6 {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	margin-top: 1.5rem;   padding-top: 0.75rem;
	font-weight: 700;   letter-spacing: 0.03em;
}
#main figcaption h4 {
	margin-top: 0;
}
#main h3:target, #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);
}
@-webkit-keyframes targeting {
	from {color: #fd0;}
	to {color: black;}
}
@keyframes targeting {
	from {color: #fd0;}
	to {color: black;}
}

#main blockquote {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	margin-top: 1.125rem;
	margin-bottom: 1.125rem;
	border-left: 1.5rem solid #eee;
	font-size: 0.95rem;
}


#main img {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	width:100%;
	max-height: 90vh;
	border: 0.2rem solid black;
}

#main figure img {
	margin-bottom: 0;
}

#main li img {
	margin-bottom: 0;
	width: 100%;
}

#main figure {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	display: table;
	margin-bottom: 1.125rem;
}

#main .original-size, #main .original-size img {
	max-width: 100%;
}
#main .double-width, #main .double-width img {
	max-width: 72rem;
}
#main .width-150, #main .width-150 img {
	max-width: 54rem;
}
#main figure a {
	display: block;
}
#main figure a:hover, #main figure a:focus {
	display: block;
	outline: 0;
	background-color: white;
}

#main figcaption {
	display: table-caption;   caption-side: bottom;
	margin-top: 0.2rem;
	font-weight: 700;
	font-size: 0.95rem;   line-height: 1.35rem;
}

input {
	font-size: 1rem;   font-weight: 500;
}

#main p {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	margin-bottom: 0.495rem;
}

#main a p, a figcaption * {
	display: inline-block;	# nur damit funktioniert text-decoration: none
	text-decoration: none;
}

#main figcaption p {
	margin-top: 0;
}
#main pre {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	font-size: 1rem;
	white-space: pre-wrap;
	font-family: 'Courier New', Courier, monospace;   line-height: 1.2em;
}
@media screen and (max-width: 33rem){
	#main pre {
		font-size: 0.9rem;
		font-weight: bold;
	}
}
@media screen and (max-width: 24rem){
	#main pre {
		font-size: 0.8rem;
		font-weight: bold;
	}
}
#main .lyric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#main .lyric-stanza {
	margin-bottom: 1.125rem;
}

/*-- Listen -------------------------------------------------------------------------------------- */

#main ol {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	list-style-type: none;
	counter-reset: list-counter;
}

#main ol > li {
	counter-increment: list-counter;
}

#main ol > li::before {
	display: inline-block;
	content: counter(list-counter) ".";
	font-family: monospace, monospace;
	text-align: right;
	width: 1.8rem;   margin-right: 0.2rem;
}

#main dl, ul {
	list-style: disc;
}
#main dt {
	margin-top: 0.75rem;
}

#main ul {
		display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.75rem;
	max-width: 36rem;
	
}
#main ul > li {
	margin-left: 2rem;
}

#main ul.previews {
	margin-bottom: 0.75rem;
	list-style-type: none;
}
#main ul.previews > li {
	max-width: 36rem;
	margin-left: 0;   margin-right: 0;
}
#main ul.previews a {
	display: block;
}
#main ul.previews li:hover {
	color: white;   background-color: #458;
	outline: 0.3rem solid #458;
}
#main ul.previews:not(.gallery) > li p:last-child {
	margin-bottom: 0.75rem;   padding-bottom: 0.75rem;
}
#main ul.previews img {
	max-height: 12rem;   object-fit: cover;
}
#main ul.previews.mini img {
	max-height: 6rem;
}

#main ul.gallery {
	display: flex;   flex-wrap: wrap;   gap: 0.75rem 0.75rem;  justify-content: center;
	max-width: 96rem;
}
#main ul.gallery > li {
	min-width: 10rem;
}
#main ul.gallery.mini {
	max-width: 36rem;
	gap: 0.3rem 0.4rem;
}
#main ul.gallery.mini > li {
	flex-grow: 1;
	min-width: 4rem;   max-width: 8rem;
}
#main ul.gallery.mini img {
	max-height: 4rem;
	border-width: 0.2rem;
}
#main .inline {
	float:left;
	width:12rem;
}
#header {
	padding: 4.2rem 1rem 0;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
	font-size: 2.7rem;
}
@media screen and (max-width: 37em){ #header{ font-size: 2.6rem; }}
@media screen and (max-width: 34em){ #header{ font-size: 2.4rem; }}
@media screen and (max-width: 31em){ #header{ font-size: 2.1rem; }}
@media screen and (max-width: 28em){ #header{ font-size: 1.8rem; }}
@media screen and (max-width: 24em){ #header{ font-size: 1.6rem; }}

@media screen and (max-width: 33rem){
	#header{ padding-left: 0.85rem;   padding-right: 0.85rem; }
}
@media screen and (max-width: 24rem){
	#header{ padding-left: 0.7rem;   padding-right: 0.7rem; }
}

h1 {
	display: block;
	margin: 0 auto 0;
	max-width: 36rem;
}

h1 > a {
	margin: 1.7em auto 0;
	font-weight: 800;
	text-decoration: none;   -text-transform: uppercase;	
	color: #507;
}

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;
}

h1 .the-thing {
	display: none;
}

h1 small {
	display: block;
	margin-top: 0em;   padding-bottom: 0.2em;
	font-size: 0.6em;   font-weight: 800;   line-height: 1.1em;
	display: flex;   justify-content: space-between;
}
#input-ecke {
	position: fixed;   top: 0;   left: 0;   z-index: 10
}

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


/* Hauptnavigation -----------------------------------------------------------------------------------------------------------*/

#menu-on-off-switch,
#menu-on-off-switch + label {
	display: none;
}

#nav {
	margin-top: 3.3rem;
	text-align: center;
	font-family: Montserrat, Verdana, Geneva, sans-serif;
}
#nav ul, #nav ul > * {
	display: inline-block;
	list-style-type: none;
}
#nav > ul {
	padding: 0 0.5rem 0;
}
#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;
}
#nav a:hover, #nav a:focus {
	text-decoration: none;
	color: white;   background-color: #458;
	outline: 0.2rem solid #458;
}
#nav [class^="open-"]:not(:hover):not(:focus) > a {
	text-decoration: underline;
}
#nav [class^="open-"]:not(.open-1):not(:hover):not(:focus) > a  {
	text-decoration-style: dotted;
}


/* Klappstulle für schmale Seiten */
@media screen and (max-width: 39rem){
	#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;
	}
	#menu-on-off-switch + label:hover, #menu-on-off-switch:focus + label {
		background-position: 0 -3.3rem;
	}
	#menu-on-off-switch:not(:checked) ~ #nav {
		display: none;
	}	
	#menu-on-off-switch:checked ~ #nav {
		display: block;
	}	
	#nav {
		position: absolute;
	}
	#nav ul, #nav ul > * {
		display: block;
	}
	#nav > ul {
		position: fixed;   top: 0rem;   z-index: 2;
		width: 100%;
		padding: 1.5rem 0 2rem;
		background-color: white;
	}
	#nav li + li {
		margin-left: 0rem;
	}
	#nav a {
		display: block;
		padding-left: 1rem;
		text-align: left;
	}		
	#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);
	}
}


/* Extra-Navigation für Serien-Elemente (Bildergalerien etc.) ------------------------------------------------------------------------------------ */


#main ul.series-navigation {
	margin: 0;
}

#main ul.series-navigation > li {
	margin-left: 0;
	list-style-type: none;
}

#main ul.series-navigation > li:last-child {   /* Link: "Übersicht/Erste Seite" */
	display: none;
}

#main ul.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;
}

#main ul.series-navigation > li:nth-child(1) > a {
	right: 1rem;   top: 49vh;
	margin-top: -1.5rem;
	background-position-x: -13.2rem;
}
#main ul.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){
	#main ul.series-navigation > li:nth-child(1) > a {
		right: 0.8rem;   top: 5.3rem;
	}
	#main ul.series-navigation > li:nth-child(2) > a {
		left: auto;   right: 0.8rem;   top: 8.3rem;
	}
}


#main ul.series-navigation a:hover,   #main ul.series-navigation a:focus {
	background-position-y: -3.3rem;
	background-color: rgba(0,0,0,0);   outline: none;
}

#main ul.series-navigation + a,
#main ul.series-navigation + figure {
	margin-top: 0;
}


/* Gefüßel ---------------------------------------------------------------------------------------------------- */


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

#footer ul {
	display: inline-block;
	list-style-type: none;
}
#footer li {
	display: inline-block;
}

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

#footer a:hover, #footer a:focus {
	text-decoration: none;
	color: white;   background-color: #458;
	outline: 0.2rem solid #458;
}
abbr {
	text-decoration: underline dotted;
}

cite, em, i {
	font-style: italic;
	letter-spacing: 0.01em;
}



code {
	display: block;
	padding: 0.75rem;
	padding-bottom: 1.05rem;
	-font-weight: bold;  background-color: #f3f3fa;
}

q:before {
	content: "»";
}

q:after {
	content: "«";
}

small {
	font-size: 0.8em;
}

strong, b {
	font-weight: 700;
}

sup {
	vertical-align: top;
	font-size: 0.8em;   line-height: 1em;
}

sup a {
	text-decoration: none;
}

/* Klassen ------------------------------------------------------------------------------------ */

#main .credits {
	margin-bottom: 0.75rem;
	font-variant: small-caps;   font-size: 0.9em;   font-weight: 600;
}

.da {
	display: inline;
}
[hidden], .wech {
	display: none;
}

li .meta-info {
	font-size: 0.9em;  font-weight: 500;
}

.tech-info {
	display: block;
	font-style: italic;   font-weight: 500;
}

.typo-capitals {
	font-size: 0.95em;
}

.visual-left-margin-2rem {
		margin-left: 2rem;
}
.visual-left-margin-3rem {
		margin-left: 4rem;
}
.visual-left-margin-4rem {
		margin-left: 4rem;
}
@media screen and (max-width: 33rem){
	.visual-left-margin-2rem,
	.visual-left-margin-3rem,
	.visual-left-margin-4rem {
		margin-left: 0rem;
	}
}@font-face{font-display:swap; font-family:'Montserrat'; font-style:normal; font-weight:700; src:url('fonts/montserrat-v23-latin-700.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Montserrat'; font-style:italic; font-weight:700; src:url('fonts/montserrat-v23-latin-700-italic.woff') format('woff'); }

@font-face{font-display:swap; font-family:'Montserrat'; font-style:normal; font-weight:800; src:url('fonts/montserrat-v12-latin-800.woff') format('woff'); }
@font-face{font-display:swap; font-family:'Montserrat'; font-style:italic; font-weight:800; src:url('fonts/montserrat-v12-latin-800-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'); }