html{
  background: rgb(219,219,219);
  background: linear-gradient(0deg, rgba(219,219,219,1) 0%, rgba(255,255,255,1) 20%);
  scroll-behavior: smooth;

}

header{
  box-sizing: border-box;
}

header a{
  text-decoration: none;
  color: #000;
}

header img{
  max-height: 100px;
  max-width: 100px;
}

body{
  margin: 0;
}

h1, h3{
  padding-left: 1em;
}

h1{
  font-family: 'Lacquer', sans-serif;
}

h3{
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}

header ul {
  list-style-type: none;
  margin-top: 0;
  padding: 1em;
  overflow: hidden;
  background-color: rgb(219, 219, 219);
  font-family: 'Lacquer';
}

p{
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  padding: 0.3em;
  margin: 0;
  font-size: 1.2em;
  z-index: 400;

}

main{
  margin: 1rem;
}

header li {
  float: left;
}


.impressum{
  float: right;
  margin: 1em;
  font-size: 0.7em;
}

.impressum h3{
  margin-bottom: 0;
  font-weight: 600;
}

footer ul{
  list-style-type: none;
  margin-top: 0;
  padding: 1em;
  overflow: hidden;
  font-family: 'Quicksand';
  line-height: 1.5em;
}

footer a{
  text-decoration: none;
  color: #000;
  font-weight: 600;
}

footer a:hover{
  color: #f83d23;
}

.bio{
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
  justify-content: flex-start;
  width: auto;
  margin-bottom: 2em;
}

.bio :first-child{
  width: 30%;
}

.bio > *{
  flex-basis: 520px;
  box-sizing: border-box;
}


.category{
  font-family: 'Lacquer';
  position: sticky;
  height: 2rem;
  font-size: 3.5em;
  top: 0;
  color: #000000;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.31);
  background-color: #fff;
  padding-bottom: 0.5em;
  z-index: 500;
  margin-bottom: 0.2em;
  
}

.category a{
  text-decoration: none;
  color: #000;
}

.category a:visited{
  color: #000;
}

.category a:hover{
  color: #f83d23;
}

main > p{
  position: relative;
  z-index: 300;

}

p a{
  text-decoration: none;
  font-weight: 600;
  color: #000;
}

p a:hover{
  color: #f83d23;
}

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}


.fa {
  color: #000;
  padding-top: 1em;
  padding-right: 4em;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

.iframe-container{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.iframe-container > *{
  position: absolute;
  width: 100%; height: 100%;
}

.gridcontainer{
  display: grid;
  gap: 1em; ;
}

.gridcontainer img{
  margin-bottom: 1em;
}


/*gallery für seiten illus und misc*/
.gallery {
  display: grid;
  grid-gap: 1.5rem; 
}

.galleryimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}
.legal h1{
  font-family: 'Lacquer',sans-serif;
}
.legal{
  align-content: center;
  padding: 1em;
  font-family: 'Quicksand',sans-serif;
}

.legal p{
  font-size: 1em;
}

.legal ul{
  list-style:none;
}

.legal a{
  text-decoration: none;
  color: #000;
  font-weight: 600;
}

.legal a:hover{
  color: #f83d23;
}

.legal .recht ul{
  list-style: lower-roman;
}





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

  .gridcontainer{
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
  }

  .gallery{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 2em;
  }


}

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

  .gridcontainer{
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
  }

  .boxbottom{
    grid-column: 1 / span 2;
  }

  .gallery{
    display: grid;
    padding:0; margin: 1em;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 1em;
  }

  .about{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding-top: 2em;
  }

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

}




/*hamburger menu*/

nav ul{
  list-style: none;
  margin: 0; padding: 0;
}

nav a{
  text-decoration: none;
  color: #444;
}

nav a:hover{
  text-decoration:overline;
  color: black;
}

@media screen and (min-width:724px) {
  header{
      display: flex;
      justify-content: space-between;
  }

  nav{
      display: flex;
      flex-direction: row;
      margin: 1em;
  }

  nav ul{
      display: flex;
      justify-content: normal;
  }

  nav a{
      display: block;
      padding: 0.5rem 0.5rem;
  }

  .secondary{
      font-size:var(--fz-secondary) ;
  }
}

/*burger menu, nur phone*/

@media screen and (max-width:723.999px){

  header{
      position: static;
      left: 0; top: 0; width: 100%;
      
      padding: 2em;
      
  }

  header h1{
      margin-bottom: 1rem;
      margin: 0;
  }

  .hamburgericon{
      position: fixed;
      right: 0;top: 1em;
      padding-top: 1em;
      padding-right: 2em;
      z-index: 700;
  }


  .hamburgericon div{
      background-color: #000;
      width: 48px; height: 4px;
      margin-bottom: 12px;
  }

  .hamburgericon div:last-child{
      margin: 0;
  }

  nav{
    position: fixed;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
    margin: 1em;
    z-index: 380;
     
  }

  .active nav{
      position: fixed;
      max-height: 24rem;
      margin: 1em;
      z-index: 600;
  }

  nav a {
      display: block;
      margin: 2rem;
      padding: 1rem;
      border-bottom: 1px solid #000;

  }

  main{
      margin-top: 2rem;
  }

  .secondary{
    padding-bottom: 1em;
  }

}

/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/quick.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lacquer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/laquer.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FRAGEN falls Lightbox nicht geht?
Font lokal einbinden geht nicht so wie gedacht, auf jeden fall variable nachfrage und evtl l