:root {
	--beige: #dfbe65;
	--gelb: #fad706;
	--dunkelviolett: #8b4490;
	--hellviolett: #c2a2c9;
}

* {
	scrollbar-color: var(--gelb);
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--dunkelviolett);
}

@font-face {
	font-family: 'KristenITC';
	src: url('KristenITC Regular.otf') format('opentype');
}

#backgroundSVG {
	position: fixed;
	z-index: -1;
	top: 2em;
	width: 100%;
	height: 100vh;
}

.balken {
	max-width: 70em;
	margin: auto;
	background-color: var(--beige);
}

img { border: 0px; }
a { text-decoration:none; }
a:link { color: var(--beige); }
a:visited { color: var(--beige); }
a:focus { color: var(--beige); }
a:hover { color: var(--gelb); }
a:active { color: var(--gelb); }
h1 {
	color: var(--gelb);
	font-weight: bold;
	font-size: 1.4em;
	margin: 0px 5px 0px;
}
p {
	color: white;
	margin: 0;
}


/*------ Header ------*/

#logo {
	display: block;
	margin-inline: auto;
	margin-top: 1em;
	max-width: 100%;
}

#menue {
	margin: auto;
	display: flex;
	max-width: 40em;
	justify-content: center;
	margin-top: 2.5em;
	text-align: center;
	line-height: 2em;
}
#menue a {
	flex: auto;
	font-family: KristenITC;
	font-size: 0.9em;
	color: black;
	vertical-align: middle;
}
#menue a:hover {
	background-color: var(--gelb);
	font-size: 1em;
	font-weight: bold;
}


/*------ Footer ------*/

#kontakt {
	line-height: 2em;
	text-align: center;
	color: black;
	font-family: sans-serif;
	font-size: 1em;
}

#kontakt a {
	color: black;
}

#facebook-logo {
	vertical-align: middle;
	height: 1.4em;
	margin-top: -0.2em;
}


/*------ Inhalt ------*/

#inhalt {
	overflow: auto;
	margin: auto;
	max-width: 70em;
	max-height: calc(100vh - 16em);
	padding: 1em 0 1em 0;
}

#inhalt img, #inhalt svg {
	display: block;
	margin: 0.8em auto 0.8em auto;
	max-width: 100%;
	border:0.3em solid var(--dunkelviolett);
}

#videos {
	display: flex;
	flex-direction: column;

}
#videos * {
	border: 0.3em solid var(--dunkelviolett);
	margin: 1em auto 1em auto;
	background-color: var(--dunkelviolett);
}
#videos .video {
/*	width: 1120px;
	height: 630px;*/
	aspect-ratio: 1120 / 630;
	width: 100%;
}
#videos .short {
/*	width: 496px;
	height: 880px;*/
	aspect-ratio: 496 / 880;
	height: calc(100vh - 20em);
}

#memberbild {
	width: 890px;
}
#memberdiv {
	visibility: hidden;
	position: absolute;
	text-align: center;
	border: 0.2em solid var(--beige);
	padding: 0.5em;
	background-color: color-mix(in srgb, var(--dunkelviolett) 90%, transparent);
}

#songliste {
	margin: 1em 2em 1em 2em;
	border: 0.2em solid var(--beige);
	max-width: 100%;
	background-color: color-mix(in srgb, var(--dunkelviolett) 70%, transparent);
	display: grid;
	grid-template-columns: repeat(auto-fill, 18em);
	grid-template-rows: auto;
	justify-content: center;
	text-align:left;
	gap: 1em;
	padding: 1em;
}
#songliste div {
	min-width: 20em;
}

#auftritte {
	margin: 1em auto 1em auto;
	text-align: left;
	background-color: color-mix(in srgb, var(--dunkelviolett) 90%, transparent);
	padding: 0.5em;
	border: 0.2em solid var(--beige);
	color: white;
}
#auftritte td {
	padding: 0.2em;
}