@import url("../../fonts/fonts.css");
@import url("../../main.css");
@import url("variants/dark.css") (prefers-color-scheme: dark);
@import url("variants/light.css") (prefers-color-scheme: light);

/***********************************************************************/

header
{
	z-index: 1;
}

#bgImage
{
	background: var(--bg-image);
	position: fixed;
	top: 3.3em;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition: 6s 250ms opacity ease-in;
	opacity: 0;
	filter: blur(1em);
}

main[loaded] > #bgImage
{
	opacity: .3;
}


#content
{
	font-size: 2svw;
	margin: 20% 4em;
	text-shadow: .1ex .1ex .3ex #000;
}

#content .call
{
	margin: 3em 4em;
}

h1,
h2,
h3,
h4
{
	text-align: center;
	margin: 0 1ex;
}


main[loaded] #badge1
{
	transform: rotate(-1deg);
	scale: 1;
	opacity: 1;
}

#badge1
{
	text-shadow: .5ex .5ex 1ex #000, .1ex .1ex .3ex #000;
	scale: 1.3;
	opacity: 0;
	transform: rotate(0deg);
	transition-duration: 1000ms, 1200ms, 400ms;
	transition-delay: 0ms, 300ms, 500ms;
	transition-property: scale, opacity, transform;
	transition-timing-function: ease-out;
}

h1
{
	font: 500% / 95% "Eras Bold", sans-serif;
}

h2
{
	font: 200% "NewsGoth", sans-serif;
	letter-spacing: .2ex;
	word-spacing: .2ex;
}


#badge2
{
	position: relative;
	margin: 4em 4em 3.5em;
	line-height: 200%;
	opacity: 0;
	transition: 400ms 100ms opacity ease-in;
}

main[loaded] #badge2
{
	opacity: 1;
}

main[loaded] #badge2 > #background
{
	transform: rotate(-1deg);
	opacity: .075;
	filter: blur(.25ex);
}

#badge2 > #background
{
	position: absolute;
	background: var(--bg);
	transform: rotate(2deg);
	opacity: 0;
	border-radius: .7ex;
	z-index: -1;
	filter: blur(2ex);
	transition-duration: 200ms, 500ms, 300ms;
	transition-delay: 1000ms, 800ms, 1000ms;
	transition-property: transform, opacity, filter;
	transition-timing-function: ease-in;
}

#badge2 > #background > h3
{
	opacity: 0;
}

#badge2 > *
{
	padding: 1ex 4.5em;
}


#listIntro
{
	margin: 3em 3em 2em;
}


#hitList
{
	list-style-type: none;
}

#hitList > li > h4
{
	color: var(--text-color);
	text-align: left;
	margin: 1.5em 0 .6ex;
	letter-spacing: .08ex;
	word-spacing: .14ex;
}

#hitList > li > ul,
#occasions
{
	color: var(--light-color);
	font: 80% "Barlow Condensed", sans-serif;
	opacity: .5;
	width: 72%;
	letter-spacing: .1ex;
	word-spacing: .14ex;
	display: inline-block;
	padding: 0;
}

#hitList > li > ul::before
{
	content: "Im Original gesungen von";
}

#hitList > li > ul::after
{
	content: "und anderen.";
}

#hitList > li > ul > li,
#occasions > li
{
	display: inline;
	list-style: none;
}

#hitList > li > ul > li::after,
#occasions > li::after
{
	content: ", ";
}

#hitList > li > ul > li:last-child::after,
#occasions > li:last-child::after
{
	content: none;
}

main #occasions
{
	font-size: 110%;
	line-height: 135%;
	margin-bottom: 3em;
}

main #occasions::before
{
	content: "Egal, ob";
}

main #occasions::after
{
	content: "oder zu anderen Gelegenheiten und Events.";
}

#call1
{
	text-transform: uppercase;
	transform: rotate(-1deg);
	line-height: 115%;
	transition: 300ms scale ease-out;
}

#call1 strong
{
	font: 150% "Eras Bold", sans-serif;
	display: block;
}

#call1:hover
{
	scale: 1.05;
}


#visitLive
{
	text-transform: uppercase;
	letter-spacing: .1ex;
	word-spacing: .1ex;
}


#claim
{
	transform: rotate(-1deg);
}

#claim > strong
{
	font: 150% "Eras Bold", sans-serif;
	display: block;
}