/*** Allgemein ***/

* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

html{
	
	width: 100%;
	height: 100%;
	position: relative;	
}

body {
	position: relative;
	background-color:#000000;
	color: rgb(255, 255, 255);
	font-family: 'Oswald' , 'Noto Sans Mono', 'Arvo', 'Work Sans', 'Montserrat','Oswald', Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	margin: auto;
} 

.button {
	display: inline-block;
	margin-top: 10px;
	padding: 15px;
	background-color:#00ffb9;
	font-weight: 700;
}
h2, table {
	color: #ffffff;
}
p {
	font-size: 14px;
	font-family: 'Quattrocento';

}

p.absatz {
	padding-bottom: 20px;
}

/*
h1, h2, h3, h4, h5, p, img, a, li {
	animation-name: fade;
	animation-duration: 3s;
}*/

a:link { text-decoration: none; color: #ffffff;}
a:visited { text-decoration: none; color: #ffffff;}
@media (hover:hover){a:hover { text-decoration: none; color:#eeff00;}}
a:active { text-decoration: none; color: #ffffff;}

	
/* Schriften */

/* latin mono */


@font-face{ 
	font-weight: 100;
	font-family: 'MyWebFont';
	src: url('/fonts/latinmodernmonoprop_10regular_macroman/lmmonoprop10-regular-webfont.woff');
}


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

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
font-display: swap;
  src: url('/fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
font-display: swap;
  src: url('/fonts/raleway-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/raleway-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/raleway-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/raleway-v28-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/raleway-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/raleway-v28-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/raleway-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/raleway-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/raleway-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/raleway-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/raleway-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/raleway-v28-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
font-display: swap;
  src: url('/fonts/raleway-v28-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/raleway-v28-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/raleway-v28-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/raleway-v28-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/raleway-v28-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/raleway-v28-latin-900.svg#Raleway') format('svg'); /* Legacy iOS */
}


/* Col System */

[class*="col-"] {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:20px;
	width: 100%;
	position: relative;
	
}

.row {
	position: relative;
	
	max-width: 1200px;
	margin: auto;
	
}

.row::after {
	clear:both;
	content: "";
	position: relative;
	display: table;
}

@media screen and (min-width: 768px) {
	
	[class*="col-"] {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	}
   
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

}


/* Menü */


.menu {
	width: calc(100%);
	color: #000000;
	background-color: #ff8c00;
	position: fixed;
	height: 100%;
	display: none;
	font-weight: bold;
	z-index: 1000;
	margin:0px;
	text-transform: uppercase;

}

.menu-list {
	padding-top: 10%;
}

.menu.checked {
	display: inherit;
}

.menu li {
	list-style-type: none;
}

.menu a {
	color: black;
	font-weight: bold;
	font-size:15vw;
}

@media (hover:hover){
.menu a:hover {
	color: #ffffff;
	
}
}

.menu::after {
	clear:both;
	content: "";
	display: table;
}

.menu .title {
	color: black;
	font-weight: 900;
	position: absolute;
	bottom: 0px;
	padding-left: 20px;
}

.menu h1{
	font-size: 25vw;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.header-menu {
	display:none;
	font-size: 2vw;
}


/* Menu Toggle */

.menu-toggle {
	position: absolute;
	font-size: 20px;
	font-weight: 900;
	top: 15px;
	right: 15px;
	height: 40px;
	width: 40px;
	overflow: hidden;
	z-index: 3000;

/* verbergen */
	display: none!important;

}

.line { 
	position: absolute;
	display: block;
	
	height: 5px; width: 40px;
	background: #ffffff; 
	border-radius: 0px;
	transition: 0.5s; 
	transform-origin: center;
	z-index:20000;
}

.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: 12px; }
.line:nth-child(3) { top: 24px; }



.menu-toggle.checked {
	position: fixed;
	top: 15px;
	right: 15px;
 }


.menu-toggle.checked .line:nth-child(1) {
	transform: translateY(12px) rotate(-45deg);
	background: #000000;
 }
 
 .menu-toggle.checked .line:nth-child(2) {
	opacity:0;
	background: #000000;
 }

.menu-toggle.checked  .line:nth-child(3) {
	transform: translateY(-12px) rotate(45deg);
	background: #000000;
 }

/* Seiteninhalte  color: #ff007b; */

/* Startseite */

.start {
	width: 100%;
	height: 100%;
}


.titelbild  {
	width: 100%;
	height: calc(100% - 200px);        
	display: block;
	position: relative;
}

.titelbild img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	object-position: center center;             
	display: block;

}

.beschreibung {
	background-color:#000000;
	height: 200px;

}


.beschreibung h1 {
	color: #ffffff;
	float: left;
	font-size: 6vw;
	letter-spacing: 0.4em; 
    text-transform: uppercase;
	font-family: 'Oswald'; 
	position: relative;
	line-height: 5vw;
}


.beschreibung h1:nth-child(2){
	border-left: 2px solid rgb(255, 255, 255);
	padding-left: 2vw;
}

.titel-h1-container {
	padding-bottom: 6.5vw;
	margin-bottom: 12px;
	border-bottom: 3px solid rgb(255, 255, 255);
}

.beschreibung p {
	clear: both;
	font-weight: 300;
	line-height: 20px;
	top: -20px;
}

.unterschrift {
	font-weight: 300!important;
	font-size: 11px;
}

.news {
	display: none;
	z-index:2;
	height: 8vw;
	width: 100%;
	overflow: hidden;
	position: absolute;
	letter-spacing: 0.4em; 
}
.news h2 {
	color: #00000000;
	position: absolute;
}

.news-banner {
	
	font-size: 3vw;
	display: block;
	margin: 0px;
	padding-top: 18px;
	position: absolute;
	overflow: hidden;
	animation: marquee 6s linear infinite;
	white-space: nowrap;
	color: #ff5d00;
	padding-left: 15px;
	font-weight: 900;
	font-family: 'Newsreader';
	line-height: 3vw;
}

	@keyframes marquee {
		0% {
			left: 0;
		}

		100% {
			left: -100%;
		}
}

/* News Container */

.news-container {

display: none;

}

.news-element{
	height:300px;
	background-color:rgb(0, 0, 0);
	margin: 40px 0 60px 0;
display: none;
}

.news-left {
	width: 35%;
	height: 100%;
	float: left;
}

.news-left img {
	width:100%;
	height: 100%;
	object-fit: cover; 
	object-position: top calc(left + 100px);             
	display: block;
}

.news-right {
	width: calc(65% - 10px);
	height: 100%;
	float: left;
	margin: 0 0 0 10px;
}




.news-right h3 {
	text-transform: uppercase;
	border-bottom: 2px solid rgb(255, 255, 255);
	margin: 10px 0 10px 0;
}

/* Konzerte */

.concerts h2, .beschreibung h2, .bio h2, .contact h2 , .media h2{
	font-size: 5vw;
	font-family: 'Oswald';
	text-transform: uppercase;
	letter-spacing: 0.4em; 
	color: #ffffff;
}

.concerts{
	padding-top:0px;
	padding-bottom:0px;
	background-color: white;
	font-family: 'Oswald';
}

.bio {
	color: #000000!important;
	background-color: #ffffff!important;
	max-width: 100%!important;
	padding-top: 20px;
}



.bio .col-12{
	max-width: 1200px!important;
	margin: 0 auto;
    float: none;
	padding-bottom: 30px;
	padding-top: 0px;
}

.bild2 img {
	width: 500px;
	max-width: 100%!important;
	object-fit: cover; 
	object-position: center top; 
	display: block;
}

.newsletter h2 {
	margin-top: 0px;
	font-size: 6vw;
	line-height: 4vw;
	text-transform: uppercase;
	letter-spacing: 0.4em; 
	
}
.newsletter{
	
	padding-top: 20px;
	padding-bottom: 30px;
	background-color: #000000;
}



.contact .col-4 , .footer .col-4 {
	width: 33%;
}

.contact img {
	margin-left: 0px;
	margin-bottom: 0px;
}

.contact h3 {
	font-size: 18px;
}

.footer {
	margin-top: 20px;
	padding-bottom: 20px;
	margin-left: 10px;
	border-top: 4px solid #000000;
}
.footer p, .footer a {
	font-size: 16px;
}

.bioh2 {
	color:#000000!important;
}
/*newsletter */

input {
	width: calc(100% - 20px);
	-webkit-border-radius: 0px;
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
	
}

input[type=text] {
	font-family: 'Oswald';
	padding: 0px;
	font-size:  4vw;
	font-weight: 900;
	border: none;
	border-bottom: 2px solid rgb(0, 0, 0);
	border-radius: 0px;
	margin: 8px 10px;
	box-sizing: border-box;
 }

 input[type=submit] {
	padding: 0px;
	font-size:  4vw;
	font-weight: 900;
	border: none;
	border-radius: 0px!important;
	margin: 8px 10px;
	box-sizing: border-box;
	background-color:#f1f1f1;
	color: #000000;
	text-align: left;
	margin-bottom: 25px;
	
 }

 .newsletter-anmeldung {
    background-color: #000000;
    margin-top: 20px;
    color:  #eeff00;
	margin-left: 10px;
	margin-right: 10px;
}

 /*Galerie */

 .titelbild2 img {
    width: 100%;

}

.galery {
	padding-top: 7vw;

}
.galery-container {
	width: 33%;
	float: left;

}

.galery-container-background {
	background-color: #ffffff;
	padding: 5px;
	margin-left: 10px;
	margin-bottom: 10px;
}

.galery-container img{
	width: 100%;
	height: 100%;
}

/*concert Tabelle */

table {
	width: 100%;
	font-weight: 900;
	border-collapse: collapse; 
  }

tr {
	border-bottom: 2px solid;
}

tr:nth-last-child(1) {
	border-bottom: none;
}

td {
	
	font-size: 3vw;
	vertical-align: baseline;
	padding-bottom: 5px;
	font-weight: 300;
	font-family: 'Oswald';
	
}

td:nth-child(1) {
	font-size: 4vw;
	font-weight: 900;
	font-family: 'Oswald';
}

td:nth-child(2) {
	font-size: 3vw;
	font-weight: 900;
	font-family: 'Oswald';
}

/* ImpressumSeite */

.backButton a {
	background-color: #000000;
    margin-top: 20px;
    color:  #eeff00;

	padding: 5px;
}

/* Respopnsive CSS */

@media screen and (min-width: 450px) {
	body {
		font-size: 15px;
	} 
}

@media screen and (min-width: 768px) {

	.news-element{
		height:250px;

	}

	.header-menu {
		display: block;
	}

	.menu h1{
		font-size: 20.5vw;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}

	.menu a {
		color: black;
		font-weight: bold;
		font-size: 70px;
		line-height: 70px;
	}

	.unterschrift, p {
		font-size: 18px;
	}

	.contact h3 {
		font-size: 3vw;
	}

	.concerts h2, .beschreibung h2, .bio h2, .contact h2 , .media h2{
		font-size: 4vw;
	}

}

@media screen and (min-width: 1200px) {

.menu h1{
	font-size: 200px;
}

.header-menu {
	font-size: 30px;
}

.titel-h1-container {
	padding-bottom: 100px;
}

.news {
	height: 100px;
}

.galery {
	padding-top: 90px;
}

	.beschreibung h1 {
		font-size: 70px;
line-height: 60px;

	}
	
	h2 {
		font-size: 60px!important;
	}

	td {
		font-size: 45px;
	}

	td:nth-child(1) {
		font-size: 60px;
	}

	

	input[type=text], input[type=submit]{
	
		font-size: 60px;

	}

	.contact h3 {
		font-size: 60px;
	}

	.news-banner {
		font-size: 20px;
line-height: 20px;

	}

	p {
		font-size: 20px;
	}
	

}



/* VIDEOPPLAYER */

.yt-layout{
    display:flex;
    gap:30px;
    width:100%;
    border-radius:0px;
    padding:30px;
    box-sizing:border-box;
}

.yt-sidebar{
    width:320px;
    flex-shrink:0;
}

.yt-sidebar h3{
    color:white;
    margin-bottom:25px;
    font-size:28px;
}

.yt-item{
    display:flex;
    gap:15px;
    align-items:center;
    padding:12px;
    border-radius:0px;
    margin-bottom:12px;
    cursor:pointer;
    transition:0.25s;
    background:#1a1a1a;
}

.yt-item:hover{
    background:#252525;
}

.yt-item.active{
    background:#333;
}

.yt-item img{
    width:90px;
    height:60px;
    object-fit:cover;
    border-radius:0px;
	display: none;
}

.yt-item strong{
    color:white;
    display:block;
    font-size:16px;
}

.yt-item p{
    color:#aaa;
    margin:3px 0 0;
    font-size:13px;
}

.yt-player{
    flex:1;
}

.yt-player iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:0px;
}

@media (max-width: 800px){

    .yt-layout{
        flex-direction: column;
        gap:20px;
        padding:15px;
    }

    .yt-player{
        order:1;
        width:100%;
    }

    .yt-sidebar{
        order:2;
        width:100%;
    }

    .yt-sidebar h3{
        font-size:24px;
        margin-bottom:15px;
    }

    .yt-item img{
        width:80px;
        height:55px;
		display: none;
    }
}

.yt-consent{
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
    box-sizing:border-box;
}

.yt-consent-inner{
    max-width:600px;
}

.yt-consent h3{
    color:white;
    margin-bottom:20px;
}

.yt-consent p{
    color:#ccc;
    line-height:1.5;
    margin-bottom:15px;
}

.yt-consent a{
    color:white;
    text-decoration:underline;
}

.yt-consent button{
    background:white;
    color:black;
    border:0;
    padding:14px 24px;
    cursor:pointer;
    font-size:16px;
    margin-top:10px;
}

.yt-consent button:hover{
    opacity:0.85;
}