/* ====================================================  GLOBAL DEFINITION  ==================================================== */

/* alternatives Boxmodell */
*, ::before, ::after {
  box-sizing: border-box;
}

/* Farbfestlegungen nur als Fallback für IE9-11
   custom properties für alle anderen!            */
body {
		max-width: 40em;
		margin: 0 auto;
		padding: 0 em;
		min-height: 100vH;
		font: normal 1em Arial, sans-serif;
		color: gold; /* wird als currentColor für die Akzentfarbe verwendet. */
		background-image: linear-gradient(to bottom, #440000, black);
		border-style: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-style: none;
		}

p, ol, ul, dl {
		color: #333;
		color: var(--font-color);
		}

:root {
  --background-color: #fff;
  --background2-color: #ccc;	
  --background3-color: #ccc;
  --accent1-color: darkred;
  --accent2-color: orange;
  --accent3-color: #fca600;
  --accent4-color: #220000;
  --accent5-color: #660000;
	--font-color: #333;
   --font2-color: #666;
	--link-color: #fca600;		
    }

:root.dark {
  --background-color: #666;
  --background2-color: #666;	
  --background3-color: #ccc;		
  --accent1-color: darkred;
  --accent2-color: orange;	
  --accent3-color: #fede9e;	
  --font-color: #fff;
  --font2-color: orange;		
  --link-color: orange;		
    }

/* ====================================================  DEVICES  ==================================================== */

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* Smartphones (portrait and landscape)(small) */
@media only screen 
	and (min-width : 0px)
	and (max-width : 767px){
/*Style*/
}

/* Tablet(medium) */
@media only screen
	 and (min-width : 768px)
	 and (max-width : 1023px){
/*Style*/
}

/* Cat S42  */
@media only screen
	 and (min-width : 720px)
	 and (max-width : 1044px){
/*Style*/
}

/* Desktops, big landscape tablets and laptops(Large, Extra large) */
@media only screen
	and (min-width: 1024px){
/*Style*/
}

/* ====================================================  HEADER  ==================================================== */

header {
		position: relative;
		margin: 0;
		padding: 0.2em;
		height: 9vh;
		width: 100%;
		align-items: center;
		border-style: none;
/*  border-style: dotted; */
		}

header h1 a {
		padding: .5em .5em .5em 3em;
		height: 3em;
		background-color: #44000; no-repeat left;
		text-decoration: none;
/*  border: 1px solid transparent; */
		}

header p {
		font-variant: small-caps;
		font-size: 2em;
		}		

header span {
		font-weight: bold;
		}

.akzentfarbe1 {
		color: olive;
		color: var(--accent2-color);
		}

.akzentfarbe2 {
		color: darkred;
		color: var(--accent1-color);	
		}


/* ====================================================  CONTENT  ==================================================== */

h1 {
		color: #FCA000;
		height: 1em;
		font-weight: bold;
		text-align: center;
		border: grey 0px solid;
		}

h2 {
		color: gold;
		height: 0.5em;
		font-weight: bold;
		text-align: center;
		border: grey 0px solid;
		}
		
h3 {
		color: gold;
		height: 0.3em;
		font-weight: bold;
		text-align: center;
		border: grey 0px solid;
		}
  
a {
		color: currentColor;
		color: var(--link-color);	
		}	
			
a:hover, a:focus {
		font-weight: bold;
		background-color: var(--accent4-color);
		}
		
.blink {
		text-decoration: blink;
		}
		
/* ====================================================  NAV  ==================================================== */

nav ul {
/*  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);  */
		text-align: center;
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
/*   background-color: #220000; */
		}

nav a {
		background-color: #440000;
		color: gold;
		text-decoration: none;
		display: inline-block;
		width: 95%;
		margin: .5em 0;
		padding: 1em 1em;
		border-radius: .5em;
		}

nav a[aria-current="page"]{
		color: orange;
		font-weight: bold;
		}

nav a:hover,
nav a:focus {
		background-color: var(--accent3-color);
		color: currentColor;
		}

.dark nav a:hover,
.dark nav a:focus {
		color: #333;
		}

nav a:hover::after ,
nav a:focus::after{
		color: transparent;
		}

nav li {
		margin: 0;
		flex: 1 1 0%;
		}
		
/* ===================================================  SUBTITLE  =================================================== */

nav .subtitle::after {
	position: relative;
	content: " ▶";
	color: currentColor;
	display: inline-block;
	width: 2em;
	right: 0;
}

nav .subtitle:hover::after,
nav .subtitle:focus::after {
	content: " ▼";
}

/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}	
	
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
}

/* ====================================================  FOOTER  ==================================================== */

footer {
		background-color: black;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1em;  
		bottom: 0;
		width: 100%;
		height: 8vh;
		margin-top: auto;
		border-style: none;
		text-align: center;
/*   border-style: dotted;  */
		}

footer ul {
/*  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);  */
		text-align: center;
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex;
		flex-direction: row;
		border-style: none;
/*   background-color: #220000; */
		}

footer a {
		background-color: #000000;
		color: gold;
		text-decoration: none;
		display: inline-block;
		width: 95%;
		margin: .5em 0;
		padding: .5em 1em;
		border-radius: .5em;
		border-style: none;
		}

footer a[aria-current="page"]{
		color: orange;
		font-weight: bold
		}

footer a:hover,
footer a:focus {
		background-color: var(--accent3-color);
		color: currentColor;
		}		

footer a:hover::after ,
footer a:focus::after {
		color: transparent;
		}

footer li {
		margin: 0.0em;
		flex: 1 1 0%;
		}
  
/* ====================================================  MAIN  ==================================================== */

/* Main wird zum Flex-Container */
main {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-grow: 0.5;
		align-self: center;
		border-style: none;
		}

.box, .date {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: top;
		border-style: none;
		}

.box div {
      width: 100%;
      padding: 0.5em;
      margin: 0em;
      display: flex;
      justify-content: center;
		align-items: center;
      text-align: center;
/*    font-size: 32px;  */
      }
 
/* ====================================================  BAND  ==================================================== */
          
 .band {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: left;
		font-color: #FCA400;
		border-radius: .5em;
		}     
    
.band div {
      width: 100%;
      padding: 0.3em;
      margin: 0em;
      display: flex;
      justify-content: left;
		align-items: center;
      text-align: left;
      border-style: none;
      }
      
.band a {
		display: inline-block;
		margin: .3em 0;
		padding: .3em .7em;
		border-radius: .5em;
		border-style: none;
		text-decoration: none;
		}
		
.band a[aria-current="page"]{
		color: yellow;
		font-weight: bold;
		}
		      
.band li {
		width: 100%;
		list-style-type: none;
		text-decoration: none;
		border-style: none;
		margin: 0;
		}
		
.band a:hover,
.band a:focus {
		background-color: var(--accent5-color);
		color: currentColor;
		}
		
.band a:hover::after ,
.band a:focus::after{
		color: transparent;
		}
				
.bandi {
		display: flex;
		align-items: center;
		flex-direction: column;
		font-variant: small-caps;
		font-size: 1.4em;
		color: #FCA600;
		text-decoration: none;
		}
		
.band b {
		font-size: 1.2em;
		color: #FCA000;
		}
		
.band p {
		font-size: 1em;
		color: gold;
		}

.bandex {
		width: 98%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: top;
		font-color: #FCA400;
		}     
    
.bandex div {
      width: 90%;
      padding: 0.5em;
      margin: 0em;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: left;
      border-style: none;
      }
      
.bandex a {
		color: gold;
		text-decoration: none;
		display: inline-block;
		align-items: center;
		text-align: center;
		width: 18%;
		margin: .5em 0;
		padding: .5em 1em;
		border-radius: .5em;
		}

.bandex a:hover,
.bandex a:focus {
		background-color: var(--accent5-color);
		color: currentColor;
		}		

.bandex a:hover::after ,
.bandex a:focus::after {
		color: transparent;
		}
		
.mediax {
		width: 98%;
      padding: 0 em;
      margin: 0em;
      display: flex;
		flex-direction: column;
      }
      
.mediax div {
      width: 100%;
      margin: 0em;
      display: flex;
		align-items: center;
      text-align: left;
      border-style: none;
      }

.galerie {
		width: 98%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
 		align-items: center;
		border-style: none;
		} 
		
.impr {
		width: 98%;
		display: flex;
		flex-direction: column;
		border-style: none;
		margin-left: 0em;
		}

.impr div {
      display: flex;
		align-items: center;
      text-align: left;
      border-style: none;
      }
		
.impr a {
		color: currentColor;
		color: var(--link-color);	
		}
		
.impr p {
		font-size: 1em;
		color: darkgrey;
		}
		 
.itemx {
		float: right;
		}
      
.text {
		position: relative;
		top: 0%; 
		right: 0%;
		text-transform: uppercase;
		font-family: verdana;
		font-size: 4.0em; 
		font-weight: 500;
		color: #FCA000;
		border-style: none; 
		text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
		1px 18px 6px rgba(16,16,16,0.4),
		1px 22px 10px rgba(16,16,16,0.2),
		1px 25px 35px rgba(16,16,16,0.2),
		1px 30px 60px rgba(16,16,16,0.4);
		}

.text:hover {
		transition: 0.3s;
		text-shadow: 1px -1px 0 grey, 1px -2px 0 grey, 1px -3px 0 grey,
			1px -4px 0 grey, 1px -5px 0 grey, 1px -6px 0 grey, 1px -7px 0 grey,
			1px -8px 0 grey, 5px -13px 15px black, 5px -13px 25px #808080;
		}

.mytext:hover + .mask {
		visibility: visible;
		}

.mask {
		visibility: hidden;
		}
					
#image {
		width:200px;
		height: auto;
		}

#image:hover {
		width:400px;
		height: auto;
		}

/* ====================================================  IMAGE  ==================================================== */

.band div + .pop-up {
     display: flex;
     text-align: center;
	  align-items: center;
	  }
  
/* ====================================================  MEDIA  ==================================================== */

.youtube-video-container {
		position: relative;
		overflow: hidden;
		width: 100%;
		}

.youtube-video-container::after {
		display: block;
		content: "";
		padding-top: 56.25%;
		}

.youtube-video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

/* ====================================================  END  ==================================================== */