@charset "utf-8";




/*** Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:300;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:300;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
} 
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::before,*::after{
	box-sizing:border-box;
}


/*** Variablen */

:root{
	font-size:10px;
	
	--schwarz:#000000;
	--schwarz-t10:rgba(0,0,0,0.1);
	--schwarz-t20:rgba(0,0,0,0.2);
	--schwarz-t30:rgba(0,0,0,0.3);
	--schwarz-t50:rgba(0,0,0,0.5);
	--schwarz-t70:rgba(0,0,0,0.7);
	--schwarz-t90:rgba(0,0,0,0.9);
	
	--weiss:#ffffff;
	--weiss-t50:hsla(0,100%,100%,0.5);

	--content-padding:12rem;
	--content-width:98rem;
	--header-height:20rem;
	--header-height-small:10rem;
	--section-padding:calc((100% - var(--content-width)) / 2);
	--section-block-padding:12rem;
	--section-inline-padding:calc((100% - var(--content-width)) / 2);
	
	--braun:hsl(30,35%,12%);
	--braun-hell-1:hsl(30,35%,22%);
	--braun-hell-2:hsl(30,35%,32%);
	
	--beige:hsl(26,59%,69%);
	--beige-t30:hsla(26,59%,69%,0.3);
	--beige-t50:hsla(26,59%,69%,0.5);
	
	--rot:hsl(10,70%,40%);
	--rot-t50:hsla(10,70%,40%,50%);
}


/*** Fonts */

@font-face{
	font-family:'EB Garamond';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/eb-garamond-v24-latin-regular.woff2') format('woff2');
}
@font-face{
	font-family:'EB Garamond';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/eb-garamond-v24-latin-700.woff2') format('woff2');
}
@font-face{
	font-family:'Rubik';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/rubik-v19-latin-regular.woff2') format('woff2');
}
@font-face{
	font-family:'Rubik';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/rubik-v19-latin-700.woff2') format('woff2');
}


/*** Global*/

html{
	scroll-behavior:smooth;
}
html,
body{
	height:100.1%;
}
body{
	padding-top:var(--header-height);
	background-color:var(--braun);
	background-image:url('../images/hintergrund.jpg');
	background-size:cover;
	color:var(--weiss);
	font-family:'EB Garamond', serif;
	font-size:1.8rem;
	line-height:1.4;
	font-weight:300;
}
::selection{
	color:var(--weiss);
	background-color:var(--schwarz-t90);
}
::-moz-selection{
	color:var(--weiss);
	background-color:var(--schwarz-t90);
}

::-webkit-scrollbar{
	width:2rem;
}
::-webkit-scrollbar-track{
	background:var(--braun);
}
::-webkit-scrollbar-thumb{
	background:var(--braun-hell-1);
	border:4px solid var(--braun);
	border-radius:500px;
}
::-webkit-scrollbar-thumb:hover{
	background:var(--braun-hell-2);
}


a{
	color:var(--weiss);
}

main{
}
main section{
	padding:var(--section-block-padding) var(--section-inline-padding);
	text-align:center;
}

section h1,
section h2,
section h3{
	font-family:'Rubik',sans-serif;
	font-size:3rem;
	text-transform:uppercase;
	line-height:1.1;
}

section figure img{
	width:100%;
	height:auto;
	display:block;
}


/*** Header */

header{
	background-color:var(--schwarz-t70);
	height:var(--header-height);
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:10;
	transition:height 0.3s ease-in-out,background 0.3s ease-in-out;
	box-shadow:0 0 3rem var(--schwarz-t50);
}
header.klein{
	height:var(--header-height-small);
	background-color:var(--schwarz-t90);
}
header h3{
	margin:0 auto 3rem auto;
	transition:margin 0.3s ease-in-out;
}
header.klein h3{
	margin:0 auto 0.5rem auto;
}
header h3 img{
	display:block;
	width:30rem;
	height:auto;
	transition:width 0.3s ease-in-out;
}
header.klein h3 img{
	width:15rem;
}
header nav{
	display:flex;
	justify-content:center;
}
header nav ul{
	display:flex;
}
header nav ul li{
	padding:0 1rem;
}
header nav ul li a{
	font-size:2.5rem;
	transition:color 0.3s ease-in-out;
}
header nav ul li a.active{
	color:var(--beige);
}


/*** Content */

main > section{
	border-top:2px dotted var(--beige-t30);
}
section h2{
	font-size:4rem;
	margin-bottom:6rem;
	text-decoration:underline;
	text-decoration-color:var(--beige-t30);
	text-decoration-thickness:0.3rem;
	text-underline-offset:0.3rem;
}
section p{
	margin-bottom:2rem;
}




/** - Album */

section.album{
	padding-top:calc(var(--content-padding) / 2);
}
section.album figure{
	padding:3rem;
}
section.album div.grid > figure img{
	box-shadow:0 0 2rem var(--schwarz-t90);
	transform:rotate(-4deg) scale(1.1) translateX(2rem);
}
section.album div.grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	justify-content:center;
	align-content:center;
	margin-bottom:5rem;
	background-color:var(--schwarz-t50);
}
section.album div.grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	justify-content:center;
	align-items:center;
	border-top:5px solid var(--beige-t30);
}
section.album div.grid > div.spotify-player{
	display:flex;
	align-items:center;
	justify-content:center;
	border-left:1px solid var(--beige-t30);
}
section.album div.grid div.spotify-dsgvo{
	display:flex;
	flex-direction:column;
	position:relative;
	justify-content:center;
	width:30rem;
	height:38rem;
}
section.album div.grid div.spotify-dsgvo div.container{
	transition:opacity 0.3s ease-in-out;
}
section.album div.grid div.spotify-dsgvo div.container > *:last-child{
	margin-bottom:0 !important;
}
section.album div.grid div.spotify-dsgvo h3{
	font-size:2rem;
	margin-bottom:2rem;
	padding:0 4rem;
	text-transform:none;
}
section.album div.grid div.spotify-dsgvo p{
	font-size:1.5rem;
	padding:0 4rem;
}
section.album div.grid div.spotify-dsgvo p.notice{
	font-size:1.3rem;
}
section.album div.grid div.spotify-dsgvo p.notice a{
	color:var(--beige);
}
section.album div.grid div.spotify-dsgvo img{
	width:30rem;
	height:38rem;
	opacity:0.6;
	filter:blur(0.1rem);
	position:absolute;
	z-index:-1;
	box-shadow:inset 0 0 2rem var(--schwarz);
}
section.album div.grid div.spotify-dsgvo div.check{
	width:5rem;
	height:1.5rem;
	border-radius:500px;
	background-color:var(--rot);
	margin:0 auto 3rem auto;
	position:relative;
	cursor:pointer;
}
section.album div.grid div.spotify-dsgvo div.check::before{
	content:'';
	position:absolute;
	right:0;
	top:50%;
	width:2rem;
	height:2rem;
	border-radius:50%;
	background-color:var(--weiss);
	transform:translateY(-50%);
}

section.album h2{
	font-size:9vmin;
	font-weight:700;
	line-height:1;
	color:var(--beige);
	text-decoration:none;
}
section.album h2:nth-of-type(2){
	font-size:15rem;
	margin-bottom:3rem;
}
section.album ul{
	display:flex;
	gap:1rem;
	justify-content:center;
	margin-bottom:4rem;
}
section.album ul li a{
	display:block;
	height:4rem;
	width:11rem;
	background-position:center center;
	background-size:80% auto;
	
	background-repeat:no-repeat;
	transition:background-color 0.5s ease-in-out;
	opacity:0.5;
	background-color:var(--schwarz-t50);
}
section.album ul li a span{
	display:none;
}
section.album ul li a.apple-music{
	background-image:url('../images/streaming/apple-music.svg');
}
section.album ul li a.amazon{
	background-image:url('../images/streaming/amazon.svg');
}
section.album ul li a.spotify{
	background-image:url('../images/streaming/spotify.svg');
}
section.album ul li a.bandcamp{
	background-image:url('../images/streaming/bandcamp.svg');
}
section.album ul li a.deezer{
	background-image:url('../images/streaming/deezer.svg');
}
section.album ul li a.youtube-music{
	background-image:url('../images/streaming/youtube-music.svg');
}
section .paypal{
	margin-top:4rem;
}
section .paypal .button{
	background-color:var(--beige);
	cursor:pointer;
	transition:background 0.5s ease-in-out;
	font-size:2.2rem;
	font-family:'Rubik';
	color:var(--braun);
	margin-bottom:1.5rem;
	border:0;
	border-radius:500px;
	padding:2rem 4rem;
}


/** - Videos */

section.videos{
	background-color:var(--schwarz-t50);
	position:relative;
	overflow:hidden;
	--video-aspect-ratio:16/6.75;
}
section.videos h2 span{
	color:var(--beige);
	font-weight:700;
}
section.videos ul li{
	background-color:var(--schwarz-t50);
	box-shadow:0 0 2rem var(--schwarz-t50);
	margin-bottom:3rem;
}
section.videos ul li:last-chold{
	margin-bottom:0;
}
section.videos h3{
	text-transform:none;
	color:var(--beige);
	padding:2rem 0 1rem 0;
}
section.videos h3 span{
	color:var(--beige-t50);
}
section.videos div.youtube-player{
	position:relative;
	aspect-ratio:var(--video-aspect-ratio);
}
section.videos div.youtube-player div.youtube-dsgvo{
	aspect-ratio:var(--video-aspect-ratio);
	display:flex;
	flex-direction:column;
	position:relative;
	justify-content:center;
}
section.videos div.youtube-player div.youtube-dsgvo div.check{
	width:5rem;
	height:1.5rem;
	border-radius:500px;
	background-color:var(--rot);
	margin:0 auto 3rem auto;
	position:relative;
	cursor:pointer;
}
section.videos div.youtube-player div.youtube-dsgvo div.check::before{
	content:'';
	position:absolute;
	right:0;
	top:50%;
	width:2rem;
	height:2rem;
	border-radius:50%;
	background-color:var(--weiss);
	transform:translateY(-50%);
}
section.videos div.youtube-player div.youtube-dsgvo h3{
	font-size:2rem;
	margin-bottom:2rem;
	padding:0 4rem;
	text-transform:none;
}
section.videos div.youtube-player div.youtube-dsgvo p{
	font-size:1.5rem;
	padding:0 4rem;
}
section.videos div.youtube-player div.youtube-dsgvo p.notice{
	font-size:1.3rem;
}
section.videos div.youtube-player div.youtube-dsgvo p.notice a{
	color:var(--beige);
}

section.videos div.youtube-player img{
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
	z-index:-1;
	filter:blur(0.2rem);
	opacity:0.7;
	left:0;
	top:0;
	outline:2px solid var(--beige);
	outline-offset:-2px;
}

section.videos iframe{
	width:100%;
	aspect-ratio:var(--video-aspect-ratio);
	display:block;
}
section.videos > img{
	width:110vw;
	position:absolute;
	left:-5vw;
	bottom:0;
	z-index:-1;
	opacity:0.3;
	transform:translateY(50%);
}


/** - Texte */

section.texte ul li{
	background-color:var(--schwarz-t30);
	padding:3rem;
}
section.texte h3{
	font-size:2rem;
	margin-bottom:3rem;
	text-transform:none;
}
section.texte p{
	max-width:40ch;
	margin:0 auto 2rem auto;
}
section.texte .container p:last-of-type{
	margin-bottom:0;
}
section.texte p.chorus{
	font-weight:700;
}
section.texte p.pre-chorus{
	font-style:italic;
}

/*** - Thankyou */

section.thankyou div{
	padding:5rem;
	background-color:var(--rot-t50);
}
section.thankyou div p:first-of-type{
	font-size:3rem;
}
section.thankyou div p:last-of-type{
	margin-bottom:0;
}
section.thankyou div h2{
	margin-bottom:2rem;
}
section.thankyou div p a{
	text-decoration:underline;
	text-underline-offset:0.2rem;
}


/** - Reviews */
section.reviews ul li{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:2rem;
	background-color:var(--schwarz-t50);
	align-items:center;
	padding:1rem;
	margin-bottom:1rem;
}
section.reviews ul li:last-of-type{
	margin-bottom:0;
}
section.reviews ul li div.container{
	display:flex;
	justify-content:center;
	flex-direction:column;
	padding:2rem;
}
section.reviews ul li div.container p{
	margin-bottom:2rem;
}
section.reviews ul li div.container p b{
	font-family:'Rubik';
}

section.reviews ul li div.container a{
	padding:1rem 2rem;
	background-color:var(--beige-t50);
	border-radius:500px;
	transition:background 0.3s ease-in-out;
	font-family:'Rubik';
}
section.reviews ul li div.container a.screenshot{
	padding:0;
	background-color:transparent;
	display:inline-block;
	color:var(--beige);
	margin-top:1rem;
	font-size:1.5rem;
}

/*** - Presse */

section.presse{
	background-color:var(--schwarz-t50);
}
section.presse ul li{
	margin-bottom:4rem;
}
section.presse ul li a{
	display:inline:block;
	padding:1rem 2rem;
	background-color:var(--beige-t50);
}
section.presse ul li a span{
	color:var(--weiss-t50);
}
section.presse p{
	margin:0 auto 2rem auto;
	max-width:60ch;
}
section.presse p b{
	font-weight:700;
}
section.presse blockquote{
	color:var(--beige);
	font-size:2.5rem;
}
section.presse blockquote span{
	font-size:2rem;
}

/** - Rechtliches */
section.rechtliches h2{
	margin-top:4rem;
	max-width:25ch;
	margin-left:auto;
	margin-right:auto;
}
section.rechtliches h3{
	max-width:30ch;
	margin-left:auto;
	margin-right:auto;
}
section.rechtliches ul{
	margin-bottom:3rem;
}
section.rechtliches p,
section.rechtliches ul li{
	max-width:60ch;
	margin-left:auto;
	margin-right:auto;
}
section.rechtliches ul li{
	margin-bottom:2rem;
	position:relative;
}
section.rechtliches ul li::before{
	content:'';
	position:absolute;
	left:50%;
	bottom:-1rem;
	width:3rem;
	height:0.1rem;
	background-color:var(--weiss);
	transform:translateX(-50%);
}
section.rechtliches p a{
	text-decoration:underline;
	text-decoration-color:var(--beige);
}


/*** Footer */

footer{
	background-color:var(--schwarz-t70);
	padding:7rem var(--section-padding);
	font-size:1.6rem;
	text-align:center;
}
footer nav.social-media ul{
	display:flex;
	justify-content:center;
	margin-bottom:7rem;
}
footer nav.social-media ul li{
	margin:0 2rem;
}
footer nav.social-media ul li a{
	display:block;
	width:10rem;
	height:2rem;
	background-size:cover;
	background-position:center center;
}
footer nav.social-media ul li a span{
	display:none;
}
footer nav.social-media ul li a.youtube{
	background-image:url('../images/youtube.svg');
}
footer nav.social-media ul li a.facebook{
	background-image:url('../images/facebook.svg');
}
footer nav.social-media ul li a.instagram{
	background-image:url('../images/instagram.svg');
}
footer a.hammersmith{
	width:20rem;
	margin:0 auto 5rem auto;
	display:block;
	opacity:0.6;
}

footer nav#legal ul{
	display:flex;
	justify-content:center;
	border-top:0.1rem solid var(--beige-t30);
	padding-top:1rem;
}
footer nav#legal ul li{
	padding:1rem 2rem;
} 
footer nav#legal ul li a{
	color:#fff;
}


/*** kreisform-Komponente kfAccordion */

.kfAccordion{
	--element-padding:2rem;
	padding:0 !important;
}
.kfAccordion h3{
	position:relative;
	display:block;
	padding:var(--element-padding);
	background-color:var(--schwarz-t50);
	border-radius:0.5rem;
	margin-bottom:0 !important;
	cursor:pointer;
	font-weight:700;
	-webkit-tap-highlight-color:rgba(255,255,255,0); 
}
.kfAccordion h3 span{
	color:var(--rot);
	font-weight:400;
	padding-right:0.5rem;
}
.kfAccordion h3:last-of-type{
	margin-bottom:0;
}
.kfAccordion h3::after{
	content:'';
	position:absolute;
	right:2rem;
	top:50%;
	width:1rem;
	height:1rem;
	border-right:0.1rem solid var(--beige);
	border-bottom:0.1rem solid var(--beige);
	transform:translateY(-60%) rotate(45deg);
	transition:all 0.3s ease-in-out;
}
.kfAccordion h3.open{
	display:block;
	background-color:var(--schwarz-t70);
	transition:all 0.3s ease-in-out;
	color:var(--weiss);
}
.kfAccordion h3.open::after{
	transform:translateY(-40%) rotate(225deg);
	border-color:var(--weiss);
}
.kfAccordion .container{
	transition:height 0.5s;
	background-color:var(--schwarz-t30);
	display:block;
	height:0;
	overflow:hidden;
	margin-top:0.2rem;
	margin-bottom:0.2rem;
}
.kfAccordion .container:last-of-type{
	margin-bottom:0;
}
.kfAccordion .container .padding{
	padding:var(--element-padding);
}


/*** Media-Queries */

/** - Hovers */

@media(hover:hover){
	header nav ul li a:hover{
		color:var(--beige);
	}
	section.album div.grid div.spotify-placeholder:hover div.container{
		opacity:0.7;
	}
	section.album ul li a:hover{
		background-color:var(--schwarz-t90);
	}
	section .paypal .button:hover{
		background-color:var(--weiss);
	}
	section.album ul li a:hover{
		background-color:var(--schwarz-t90);
	}
	section.youtube-player p.notice a:hover{
		text-decoration:underline;
	}
	section.reviews ul li div.container a:hover{
		background-color:var(--beige-t30);
	}
	section.reviews ul li div.container a.screenshot:hover{
		background-color:transparent;
	}
}


/** - Kleinere Desktops */
@media(max-width:1200px){
	:root{
		--content-padding:8rem;
		--section-block-padding:8rem;
		--section-inline-padding:8rem;
	}
	section.album h2:nth-of-type(2){
		font-size:15vmin;
	}
	section.album ul{
		flex-wrap:wrap;
	}
}

/** - Ipad Querformat */

@media(max-width:1024px){
	:root{
		--font-size:8px;
		--content-padding:5rem;
		--section-block-padding:5rem;
		--section-inline-padding:5rem;
	}
	section.album{
		padding-top:var(--content-padding);
	}
}

/** - Ipad Hochformat */

@media(max-width:825px){
	:root{
		--font-size:10px;
	}
	section.album div.grid > figure{
		padding:1rem;
	}
	section.album div.grid > figure img{
		transform:rotate(-2deg) scale(1.2) translate(0,0);
	}
	section.album div.grid{
		grid-template-columns:1fr 1.5fr;
	}
	section.album div.grid div.spotify-player{
		padding:2rem;
	}
}

/** - Smartphone */

@media(max-width:600px){
	:root{
		--content-padding:2rem;
		--section-block-padding:5rem;
		--section-inline-padding:2rem;
	}
	section.videos{
		--video-aspect-ratio:16/9;
	}
	section.videos h2{
		margin-bottom:var(--content-padding);
	}
	section.texte h2{
		margin-bottom:var(--content-padding);
	}
	section.album div.grid{
		grid-template-columns:1fr;
		margin-bottom:var(--content-padding);
	}
	section.album div.grid div.spotify-player{
		border-left:0;
		padding-top:0;
	}
	section.album h2{
		margin-bottom:var(--content-padding);
	}
	section.album div.grid > figure{
		padding:1.5rem;
	}
	section.album div.grid > figure img{
		transform:rotate(-2deg) scale(1) translate(0,0);
	}
	section .paypal .button{
		font-size:2rem;
	}
	section.videos div.youtube-player div.youtube-dsgvo h3{
		margin-bottom:1rem;
		font-size:1.6rem;
	}
	section.videos div.youtube-player div.youtube-dsgvo div.check{
		margin-bottom:1rem;
		height:1rem;
	}
	section.videos div.youtube-player div.youtube-dsgvo div.check::before{
		width:1.5rem;
		height:1.5rem;
	}
	section.videos div.youtube-player div.youtube-dsgvo p{
		margin-bottom:0.5rem;
		line-height:1.2;
	}
	section.reviews ul li{
		grid-gap:1rem;
	}
	section.reviews h2{
		margin-bottom:2rem;
	}
	section.reviews ul li{
		grid-template-columns:1fr;
	}
	section.texte p{
		max-width:20ch;
	}
	section.rechtliches h1,
	section.rechtliches h3,
	section.rechtliches h2{
		hyphens:auto;
		text-transform:none;
	}
	section.rechtliches h2{
		margin-top:4rem;
		margin-bottom:2rem;
	}
	section.rechtliches a{
		overflow-wrap:break-word;
		word-wrap:break-word;
	}
	
	.kfAccordion h3{
		text-align:left;
	}
	
	footer nav.social-media ul{
		display:block;
	}
	footer nav.social-media ul li{
		display:flex;
		justify-content:center;
		margin-bottom:3rem;
	}
	footer nav#legal ul{
		display:block;
	}
	footer nav#legal ul a{
		white-space:nowrap;
	}
}
@media(max-width:460px){
	header h3 img{
		width:25rem;
	}
	header nav ul li{
		padding:0 0.5rem;
	}
	header nav ul li a{
		font-size:2.1rem;
	}
	section.reviews ul li div.container{
		padding:1rem;
	}
}

/** - Altes Smartphone */
@media(max-width:320px){
	:root{
		font-size:7px;
	}
}