/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    color: black;
    box-sizing: border-box;
}


/* Allgemeine Stile für Links */
a {
    color: black;
}
a:focus, a:hover {    
	color: darkgrey;
}

/* Header & Navigation */
header {
    background-color: white;
    padding: 10px 0;
    position: fixed;
    width: 100%;
	z-index: 1;
    top: 0;
    border-bottom: 2px solid black;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    font-weight: bold;
}

/*     submenu navigation links      */
nav ul ul { 
	visibility: hidden;  
	height: 0;
	z-index: 1000;
	display: none; 
}

nav li:hover > ul {
	visibility: visible;
	height: auto;
}
nav li:focus-within > ul, 
.visible  { 
    visibility: visible;
    height: auto;
  	display: block;
}

img {
    max-width: 35%;
	height: auto;
	max-height: 80vh;
	padding: 1rem;
}

section{
	max-width: 1200px;
	display: block;
    margin: auto;
	padding: 1rem;
}

article{
	margin-left: 1rem;
}

h1{
	font-size: 2.5rem;
	margin: 0;
	text-align: center;
}

h2{
	font-size: 2.2rem;
	margin: 0;
	text-align: center;
}

h3{
	font-size: 2rem;
	margin-bottom:0;
}

article h3{
	font-size: 1.8rem;
	margin-bottom:2rem;
}

h4{
	font-size: 1.5rem;
}

h5{
	font-size: 1.17rem;
}

h6{
	font-size: 1.05rem;
	margin: 0.5rem 0;
}

summary{
	font-style: italic;
	cursor: pointer;
}
article details{
	margin-top:1rem;
}
section#shows details{
	margin-top:2rem;
}
section#shows summary{
	font-size: 1.17rem;
}
section#bio hr{
	width: 30%;
}
section#works details > div{
	padding: 0 2rem;
}
audio{
	margin-left: 1rem;
}

/* Fußzeile */
footer {
    text-align: center;
    padding: 10px;
    border-top: 2px solid #d3d3d3; /* Grauer Strich über der Fußzeile */
}

button {
  background: #fff;
  border-radius: 4px;
  border: 2px solid #d3d3d3;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  padding: .875rem 1.125rem;
  transition: transform .2s;
  margin: 2rem;
}

button:hover, button:active {
  transform: scale(1.05);
}

.flex{
    display: flex;
}

.flex article{
    margin-right: 4rem;
}

.center{
	align-items: center;
}

.text-center{
	text-align: center;
}

.start{
	align-items: flex-start;
}

.wrap {
	flex-wrap:wrap;
}

.gallery img{
	border-radius: 5px; /* Abgerundete Ecken für die Bilder */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für die Bilder */
    transition: transform 0.3s; /* Sanfte Übergänge bei Hover */
	margin: 0.25rem;
}

.gallery img:hover {
    transform: scale(1.05); /* Vergrößert das Bild bei Hover */
}


#main{
	min-height: 100vh;
}

#main div, #bio div{
	width: 50%;
	padding: 2rem;
}

#bio div div{
	margin: auto;
	width: 90%;
}

@media only screen and (max-width: 700px) {
  #bio div, #main div{
	width: 90%;
  }
  #bio article.flex{
	display:block;
  }
  section#main{
	display:block;
  }
  section#main img{
	margin-top:5rem;
  }
  img{
	width: 70%;
	display:block;
	margin: auto;
  }
  section#bio {
	padding-top: 3rem;
  }
  section#shows{
	padding-top: 2rem;
  }
  section#works h3{
	margin: 0;
  }
  article#komp, article#klang, article#musik{
	padding-top: 2rem;
  }
}

@media only screen and (max-width: 500px) {
  nav ul{
	 flex-direction: column;
  }
  nav ul ul { 
	visibility: visible;
    height: auto;
  	display: block;
  }
  a#works{
	  cursor: none;
  }
  a#works:hover{
	  cursor: text;
	  color: black;
  }
  img{
	margin-top: 10rem;
}