/* UNIVERSAL CSS */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}


body {
	font-family: 'Open Sans', 'Sans', sans-serif;
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 1.3em;
	color:#;
	background-color:#e6e6e6 ; 
	background-repeat: repeat;
	}
	
a {font-weight: bold; text-decoration: none;}
a:link {color: darkgrey}
a:visited {color: darkgrey}
a:active {color: lightgrey}
a:hover {color: lightgrey}



.sprungmarke {
position: relative;
top: -3em;
}

#sm_projekt {
position: relative;
top: -5em;
}

#sm_tickets {
position: relative;
top: -5em;
}

#sm_ticketseventim {
position: relative;
top: -5em;
}

#sm_footer {
position: relative;
top: -5em;
}

.freigeschaltet {
color: darkgrey;
}

.menu_content li {
margin-left: -1em;	
}

#liedname {
display: none;
}

.cd_shop img{
width: 4.4em;
max-width: 110px;
float: left;
margin-right: .5em; 	
}

.cd_shop {
padding: 1em; 
background-color: rgb(250,250,250,.9);
text-align: left;
margin-bottom: 1em;
border-radius: .5em;
}

.cd_description {
margin-top: -1.5em;
margin-bottom: .5em;
}

input.eingabefeld_cd {
display:inline;
width: 100%;
max-width: 100px;
height: 1.7em;
margin-top:.5em;
}

input.eingabefeld_adresse {
display: block;
width:97.5%;
padding:.5em;
}	

form input {
display: block;	
padding:.5em;
width: 100%;
}
	
textarea.eingabefeld_nachricht {
width: 99%;
max-width: 100%;
padding:.2em;
height: 4em;
}	



/* MOBILE ------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-device-width: 849px) {

.dektop_only {
display: none;	
}
	
#header {	
position: fixed;
top: 0px;
width: 100%;
background: rgb(255,255,255,.9);
left: 0px;
z-index: 1001;
height: 2.5em;
box-shadow: 0em 0em 2em -.2em;
}

#logo {
width: 5.5em;	
position: relative;
top: -.3em;:
}

		
#header nav {
position: fixed;
background: white;
width: 100%;
}


label.mobile_only{
width: 30px;	
position: fixed;
top: .4em;
right: 20px;
}
	
input.nav-trigger {
display: none;
}

nav {
display: none;
}
	
.nav-trigger:checked ~ nav {
display: block;	
position: relative;
top: 0em;
text-align: center;
box-shadow: 0em 0em 2em -.2em;
}

nav ul {
position: relative;
left: -1em;
}

.nav-trigger:checked + label {
display: none;
}
	
nav ul li {
list-style-type: none;	
}

.menu_content {
width: 90%;
border-radius: .7em;
margin-top: 60px;
background: rgb(255,255,255,.5);	
margin-bottom: -5em;
padding: 1em;
padding-top: 1em;
}

h4 {
text-align: center;	
color: grey;
margin-bottom: 2em;
}
	
h5 {
text-align: center;
font-weight: bold;
font-size: 1.4em;
color: lightsteelblue;
line-height: 1.2em;
}
	
h6 {
margin-top: -1em;
text-align: center;
font-weight: bold;
font-size: .9em;
color: lightsteelblue;
}	
	
#songoverview {
display: none;		
}	
	
#topabstand {
margin-top: 5.5em;		
}

#sm_projekt {
position: relative;
top: -5em;
}

#sm_tickets {
position: relative;
top: -8em;
margin-bottom: 9em;
}

#sm_ticketseventim {
position: relative;
top: -6em;
margin-bottom: 9em;
}

.green1 {
margin-left: auto;
margin-right: auto;
width: 95%;
padding-top: 8em;
padding-bottom: .01em;
margin-bottom: 5em;
background: lightgrey;
border-radius: .5em;
text-align: center;
}


.songwrapper {
background: whitesmoke;		
padding: .7em;
border: .2em solid lightsteelblue;
border-radius: .5em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
width: 85%;
position: relative;
}

.songwrapper:first-child {
margin-top: .5em;	
}


.sf_nr {
font-size: .7em;
font-weight: bold;
position: relative;
top: -1.7em;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .4em solid lightslategrey; 
border-radius: 2em;
position: relative;
z-index:1;
}


.finanziert {
font-weight: bold;
display: block;
}
	
.finanziert_g {
display: block;
}
	
.finanziert_p {
margin-left: 0em;		
}

.spenderzahl {
display: block;
}

.liedpatenschaft {
display: block;	
}
	
.song_graph {
display: none;
}	
	
.graph_probe {
display: none;
}

.graph_vorprod{
display: none;
}

.graph_studioprod {
display: none;
}

.song_red {
display: none;
}
	
.graph_red {
display: none;
}

.fundingziel {
display: none;
}

.lyrics {
margin-left: 0em;
}
	
.ansehen {
margin-left: 0em;		
}	

.song_sounds {
margin-top:1.5em;
margin-left: 0em;		
margin-bottom: 2em;
}
	
.s_probemitschnitt {
font-weight: bold;		
}
	
.s_missing {
display: block;
margin-left: 0em;		
}

.spenden {
display: block;
width: 5em;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .5em solid lightcoral; 
border-radius: 2em;
font-weight: bold;
box-shadow:  0em 0em .5em 0em;
margin-bottom: -1em;


}

.ausfinanziert {
display: block;
color: #047c04;
width: 8em;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .5em solid #047c04; 
border-radius: 2em;
font-weight: bold;
box-shadow:  0em 0em .5em 0em;
margin-bottom: 0em;
margin-top: 0em;
}

.ausfinanziert img {
height: 1em;
margin-right: .5em;
}


.q_mark {
margin-left: .5em;
border: .1em solid grey;
border-radius: 50%;
background: white;
padding-left: .55em;
padding-right: .45em;
font-weight: bold;
}

.q_mark {
display: none;
}

.q_mark2 {
display: none;
}
	
.hover_description {
margin-top: .4em;
margin-bottom: 1em;
display: block;
font-size: .7em;
line-height: 1.2em;
}

audio {
width: 100%;
}
	
#spendenformular_wrapper {
margin-top: 7em;
background: whitesmoke;		
padding: 1em;
border: .2em solid lightsteelblue;
border-radius: 1em;
margin-bottom: 3em;
margin-right: auto;
margin-left: auto;
width: 90%;
}	

#rewardwrapper {
background: whitesmoke;		
padding: 1em;
border: .2em solid lightsteelblue;
border-radius: 1em;
margin-bottom: 3em;
margin-right: auto;
margin-left: auto;
width: 90%;	
}

.spendenformular {
border: 1em solid white;
border-radius: 1em;
background: white;
margin-bottom: 1em;		
}

.reward_danke {
font-weight: bold;
font-size:.9em;
position: relative;
top: -2.2em;
left: -.5em;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .3em solid lightslategrey; 
border-radius: 2em;
z-index:1;		
}

.spendenformular input {
width: 95%;	
}

.spendenformular textarea {
width: 95%;	
height: 7em;
}	
	
input {
width: 90%;
font-size: 1em;
padding: .3em;
}	
	
input.newsletter {
width: 1em;
}

input.eingabefeld_adresse {
display: block;
width:93.5%;
padding:.5em;
}	

textarea.eingabefeld_nachricht {
width: 97%;
max-width: 100%;
padding:.2em;
height: 4em;
}	
	
button {
font-size: 1em;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border-radius: 1em;
padding: .5em;
}

.reward_item {	
border: .5em solid white;
border-radius: 1em;
background: white;
margin-bottom: 1em;
}

.reward_item ul {
margin-left: 0px;
list-style-position: outside;
position: relative;
left: -1em;
}

.reward_betrag {
font-weight: bold;
}	
		
button:active {
padding: .45em;
font-size: .95em;
margin-bottom: .2em;
}
	
button:hover {
color: whitesmoke;		
}
		
.label_infos {
font-size: small;		
}
		
#footer {
color: black;
margin-top: 6em;
margin-left: auto;
margin-right: auto;
font-size: .8em;
text-align: center;
width: 100%;
}
	
.intext {
display: block;
width: 100%;
margin-left: auto;
margin-right:auto;
margin-bottom: 1em;
}		
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}

/*__________________________________________________________________________________________________________DESKTOP! */

@media (min-device-width: 850px) { 

	
#header {	
position: fixed;
top: 0px;
width: 1000%;
height: 75px;
background: white;
left: 0px;
z-index: 1001;
box-shadow: 0em 0em .5em -.2em;
}
	
h4 {
text-align: center;	
color: grey;
margin-bottom: 2em;
}
	
b {
color: grey;	
}

h5 {
text-align: center;
font-weight: bold;
font-size: 1.4em;
line-height: 1.2em;
color: lightsteelblue;
}
	
h6 {
margin-top: -1em;
text-align: center;
font-weight: bold;
font-size: .9em;
line-height: 0.5em;
color: lightsteelblue;
}
	
	
#header img {
width: 170px;	
position: absolute;
top: -.6em;
}
	
#header div {
color: lightslategray;
position: fixed;
top: 59px;
left: 88px;
}
	
#header nav {
height: 0px;
position: fixed;
right: .5em;
top: 30px;
}

#sm_tickets {
position: relative;
top: -5em;
}
	
label.mobile_only{
display: none;
}

.nav-trigger {
display: none;
}
	
nav ul li {
list-style-type: none;	
display:inline;
margin-left: .75em;
}

.menu_content {
margin-left: auto;
margin-right: auto;
width: 67%;
border-radius: .5em;
margin-top: 74px;
border: solid .6em #f0f0f0;
background: white;	
margin-bottom: -5em;
padding: 2em;
padding-top: 1em;		
}
		
#topabstand {
margin-top: 5.5em;		
}
	
img.intext {
width: 270px;	
}
	
.green1 {
margin-left: auto;
background-image: url("scottishwinternight_2026.png");
background-repeat: no-repeat;
background-size: 1100px;
margin-right: auto;
width: 70%; 
padding: 1em;
padding-top: 11em;
border-radius: 1em;
margin-bottom: 1em;	
box-shadow:  0em 0em .3em .1em grey;
}

.songwrapper {
margin-left: auto;
margin-right: auto;
background: whitesmoke;		
padding: 1em;
border: 2px solid lightsteelblue;
border-radius: 1em;
margin-bottom: 3em;
width: 90%;
}
	
.songwrapper:first-child {
margin-top: 2em;	
}
	
.songwrapper_inactive {
margin-left: auto;
margin-right: auto;
background: whitesmoke;		
padding: 1em;
border: 1em solid lightsteelblue;
border-radius: 1em;
margin-bottom: 3em;
width: 70%;
filter: blur(4px);
}

.sf_nr {
font-weight: bold;
position: relative;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: 2px solid lightslategrey; 
border-radius: 2em;
position: relative;
top: -1.7em;
z-index:1;
}
	
.sf_title {
position: relative;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: 2px solid lightslategrey; 
border-radius: 2em;
position: relative;
top: -1.7em;
z-index:1;
}
	
.finanziert {
font-weight: bold;
margin-left: .5em;
font-size: smaller;
}
	
.finanziert_g {
margin-left: 1.5em;	
margin-right: 1em;
font-size: smaller;
}
	
.finanziert_p {
margin-left: .5em;		
}

.spenderzahl {
margin-right: .5em;	
font-size: smaller;
}

.liedpatenschaft{
font-size: smaller;	
}
	
.spenden {
display: block;
width: 5em;
margin-bottom: -4em;
position: relative;
left: 80%;
top: 0em;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .5em solid lightcoral; 
border-radius: 2em;
font-weight: bold;
box-shadow:  0em 0em .5em 0em;
}

.q_mark2 {
position: relative;
top:-1.7em;
margin-left: .5em;
border: .1em solid grey;
border-radius: 50%;
background: white;
padding-left: .55em;
padding-right: .45em;
font-weight: bold;
}
	
.ausfinanziert {
display: block;
color: #047c04;
width: 8em;
margin-bottom: -4em;
position: relative;
left: 72%;
top:-1em;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .5em solid #047c04; 
border-radius: 2em;
font-weight: bold;
box-shadow:  0em 0em .5em 0em;
}
	
.ausfinanziert img {
height: 1em;
margin-right: .5em;
}
	
	
.etappe_ausfinanziert {
display: block;
color: #047c04;
width: 8em;
margin-bottom: 3em;
margin-right: auto;
margin-left: auto;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .5em solid #047c04; 
border-radius: 2em;
font-weight: bold;
box-shadow:  0em 0em .5em 0em;
}
	
.etappe_ausfinanziert img {
height: 1em;
margin-right: .5em;
}	
		
.clickable_box {
	position: absolute;
	border-radius: 2em; 
  position: absolute; 
  width: 112%;
  height: 135%;
  top: -.4em;
  left: -.4em;
  z-index: 1001;		
}
	
.spenden:hover {
border: .5em solid #bf8282;	
color: grey;
}	
	
.spenden:active {
padding: .3em;				
}
	
.song_graph {
display: flex;
margin-top: .5em;
margin-left: 1em;
width: 80%;
height: 2em;
background: white;
}	
	
.graph_probe {
width: 38.46%;
background: white;
border-right: 1px dotted black;
font-size: .5em;
line-height: 1.5em;
}
	
audio {
width: 67%;
border-radius: em;
}

.graph_vorprod{
width: 30.76%;
background: white;	
border-right: 1px dotted black;
font-size: .5em;
line-height: 1.5em;
}

.graph_studioprod {
width: 30.76%;
background: white;	
font-size: .5em;
border-right: 1px dotted black;
line-height: 1.5em;
}

.song_red {
width: 80%;
height: 2em;
display: flex;
margin-left: 1em;
position: relative;
top:-2em;
float: left;
}
	
.graph_red {
background: red;
opacity: .3;
}

.fundingziel {
font-size: .5em;
position: relative;
top: -4em;
}
	
	
.lyrics {
margin-left: 1.5em;
}
	
.ansehen {
margin-left: 1em;		
}	

.song_sounds {
margin-top:1.5em;
margin-left: 1em;		
margin-bottom: 2em;
}
	
.s_probemitschnitt {
font-weight: bold;		
}
	
.s_missing {
margin-left: 1.5em;		
}
	
.q_mark {
margin-left: .5em;
border: .1em solid grey;
border-radius: 50%;
background: white;
padding-left: .55em;
padding-right: .45em;
font-weight: bold;
}
	
.hover_description {
display: none;		
}

.q_mark:hover + span{
width: 30%;
display: block;	
position: absolute;
left: 20em;
background: white;
padding: 0.5em;
border: .1em solid grey;
border-radius: 1em;
z-index: 999;
}

.q_mark2:hover + span{
width: 30%;
display: block;	
position: absolute;
left: 20em;
background: white;
padding: 0.5em;
border: .1em solid grey;
border-radius: 1em;
z-index: 999;
}
		
	
#spendenformular_wrapper {
margin-top: 10em;
margin-left: 3em;
background: whitesmoke;		
padding: 1em;
border-radius: 1em;
margin-bottom: 3em;
width: 50%;
float: left;
border-radius: 1em;
margin-bottom: 1em;
box-shadow:  0em 0em .3em .1em grey;	
}	
	

.spendenformular {
border: 1em solid white;
border-radius: 1em;
background: white;
margin-bottom: 1em;	
padding-right: 1em;
}
	
input {
font-size: 1em;
padding: .3em;
}	
	
input.newsletter {
width: 1em;
}

input.checkbox_newsletter {
width: 2em;	
height: 1em;
margin-left: -.5em;
display: inline;
}
	
textarea {
width: 100%;
height: 6em;
font-size: 1em;
padding: .3em;
}
	
button {
font-size: 1em;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border-radius: 1em;
padding: .5em;
}
	
button:active {
padding: .45em;
font-size: .95em;
margin-bottom: .2em;
}
	
button:hover {
color: whitesmoke;		
}
	
	
	
.label_infos {
font-size: small;		
}
	
#rewardwrapper {
position: absolute;
top: 10.5em;
right: 3em;
background: whitesmoke;		
padding: 1em;
border: 2px solid lightsteelblue;
border-radius: 1em;
margin-bottom: 3em;
width: 30%;	
}	
	
.reward_danke {
font-weight: bold;
position: relative;
top: -2.2em;
background: white;
padding: .5em;
padding-left: 1em;
padding-right: 1em;
border: .2em solid lightslategrey; 
border-radius: 2em;
z-index:1;		
}
	
.reward_item {	
border: 1em solid white;
border-radius: .5em;
background: white;
margin-bottom: 1em;
padding:.5em;
}

.reward_item li {
margin-left: -1em;
}
	
.reward_betrag {
font-weight: bold;
background: white;
z-index:1;	
width: 50%;
}

	
#footer {
color: blacK;
margin-top: 6em;
margin-left: auto;
margin-right: auto;
font-size: .8em;
text-align: center;
width: 70%;
}

.intext{
float: left;
margin-right: 1em;
margin-bottom: .5em;
border: .5em solid  #f0f0f0 ;	
}	
	
.intext_right {
float: right;
margin-left: 2em;
}
	
#songoverview {
position: fixed;
left: 30px;
top: 100px;
font-weight: bold;
color: whitesmoke;
opacity: .7;
}
	
.song_kugel_green {
width: 30px;
height: 30px;
border-radius: 15px;
margin-bottom: 3px;
margin-right: 1em;
text-align: center;
background: #6fbf6f;
}
	
.song_kugel_orange {
width: 30px;
height: 30px;
border-radius: 15px;
margin-bottom: 3px;
margin-right: 1em;
text-align: center;
background: lightcoral;
}
	
.song_kugel_grey {
width: 30px;
height: 30px;
border-radius: 15px;
margin-bottom: 3px;
margin-right: 1em;
text-align: center;
background: grey;
}

.song_kugel_nummer {
position: relative;
top: 3px;
}

#songoverview a:link {color: white;}
#songoverview a:visited {color: white;}
#songoverview a:hover {color: lightgrey;}	
#songoverview.song_kugel_green a:active {color:darkgrey}


	
.sprungmarke_song {
position: relative;
top: -120px;
}
	
	
/* PROJEKTPORTAL ---------------------------*/
	
#projekt_liste {
align-items: center;
justify-content: center;
margin-top: 7em;
display: flex;
flex-wrap: wrap;
}

.projekt_wrapper {
background: whitesmoke;
border-radius: .5em;
text-align: left;
margin: 1em;
box-shadow:  0em 0em 1em .2em;
width: 20%;
height: 360px;
overflow: hidden;
padding-bottom: 1em;
}	
	
.projekt_wrapper:hover {
box-shadow:  0em 0em 1em 1em;	
} 
	
.projekt_genre {
padding-left: .7em;
padding-top: .5em;
padding-bottom: .5em;
color: white;
width: 100%;
font-size: 1em;
font-weight: bold;
position: relative;
background: black;
opacity:.5;
margin-bottom: -1.5em;
}	
	
.projekt_picture img {
margin-top: -.8em;
width: 100%;	
}
	
.projekt_band_name {
padding-left:.7em;
text-align: left;
font-weight: bold;	
}	
	
.track_zahl {
text-align: left;
padding-left: .7em;
height: 40px;
font-size: .8em;		
}	
	
.projekt_album_name {
text-align:left;
padding-left: .7em;
}
	
.projekt_finanziert1 {
padding-left: .7em;
color: black;
margin-top: .5em;
font-size: .8em;
opacity: .6;
}
	
.projekt_finanziert2 {
padding-left: .7em;
font-weight: bold;
background: black;
color: white;
margin-top: 0em;
font-size: .8em;
opacity: .6;
}
			
}