* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  box-sizing: border-box;
}

/*header*/
/*-------------------------------------------------------------------------------------------------*/

header {
  background: #ffffff;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  z-index: 999;
  width: 100vw;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 15%;
}

#logo {
  width: 12.5rem;
  height: auto;
}

nav ul {
  display: flex;
  grid-gap: 1rem; /* abstand zwischen den menü punkten*/
}

nav ul li {
  display: inline-block;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  display: inline;
}

.nav-menu li a {
  color: #000000;
  font-size: 0.875rem;
  text-transform: uppercase;
}

nav ul li a:hover {
  color: #945738;
}

.icon-bmenu,
.checkbox-bmenu {
  display: none;
}
/*-------------------------------------------------------------------------------------------------*/

/*Home*/
/*-------------------------------------------------------------------------------------------------*/

main {
  margin-top: 0;
  padding-top: 1.875rem;
  width: 100%;
  display: grid;
  background-color: 000000;
  background-image: url(../bilder/IMG_6333.jpg);
    background-size:auto;
    background-repeat:round;
  background-attachment: scroll;
}


.home_info {
  max-height: 100%;
}



h1 {
    color: #ffffff;
    font-family: serif, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: lighter;
}

.menu {
  text-align: center;
    margin-top: 3.75rem;
}

#startbild {
  height: auto;
  width: 69%;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}


.div1 {
  margin: 10% 15%;
  margin-top: 10%;
}

.div1 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

.div2 {
  margin: 0 15%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

ul {
  color: #ffffff;
}

li {
  margin: 0.625rem 0;
}

#set {
  text-transform: uppercase;
    margin-left: 0.938rem;
}

.duobild {
  flex-grow: 1;
  margin-left: 10%;
}

#duobild {
  height: 33.75rem;
  width: auto;
  max-width: 37.5rem;
  margin-top: 3.125rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

.div3 {
  margin: 10% 15%;
}

.div3 p {
  color: #ffffff;
    margin: 0.75rem 0;
}

.div4 {
  margin: 10% 15%;
  display: flex;
}

.div4 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

.kazoo {
  padding: 3% 0;
  margin-left: 3.125rem;
}

#kazoobild {
  height: auto;
  max-width: 28.125rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

#huete {
  width: auto;
  height: 10rem;
}

#wolle {
    height: auto;
    width: 100%;
    max-width: 18.75rem;
}

/*-------------------------------------------------------------------------------------------------*/

/*Mike*/
/*-------------------------------------------------------------------------------------------------*/

.div5 {
  margin: 3.75rem 15% 9.375rem;
  display: flex;
  flex-direction: row;
}

.div5 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

#name {
  font-size: 1.5rem;
  margin-bottom: 0;
}

#gesang {
  color: #ffffff;
  font-size: 1.188rem;
  margin-bottom: 1.875rem;
}

#mike {
  height: 18.75rem;
  width: auto;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

.mike_text {
  margin: 5.625rem 3.125rem 0;
    max-width: 43.75rem;
}
.mike_text p {
  margin: 0.625rem;
}

.div6 {
  margin: 3.75rem 15% 9.375rem;
  display: flex;
  flex-direction: row;
  grid-gap: 3.625rem;
}

.div6 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

.huete {
  order: 2;
}

#huete {
  height: auto;
  width: 21.875rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

.solo_prog {
  order: 1;
    max-width: 43.75rem;
}

.div7 {
  margin: 8% 15%;
    max-width: 44.375rem;
}

.div7 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

#teil1 {
  margin-bottom: 1.25rem;
}

#teil2 {
  margin-bottom: 1.25rem;
}

#teil3 {
  margin-bottom: 1.25rem;
}

#teil4 {
  margin-bottom: 1.25rem;
}

/*-------------------------------------------------------------------------------------------------*/

/*Wolle*/
/*-------------------------------------------------------------------------------------------------*/

#wolle_seite{
margin-bottom: 1.25rem;
}

.div8 {
  margin: 3.75rem 15% 9.375rem;
  display: flex;
  flex-direction: row;
  grid-gap: 3.625rem;
}

.div8 p {
    color: #ffffff;
    margin: 0.75rem 0;
}

#bass {
  color: #ffffff;
  font-size: 1.188rem;
  margin-bottom: 1.875rem;
}

#wolle {
  height: 21.25rem;
  width: auto;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

.wolle_text {
    margin: 5.625rem 3.125rem 0;
    max-width: 43.75rem;
}

.wolle_text p {
  margin: 0.625rem;
}

#third_link {
  color: #3366cc;
}
#third_link:link {
  color: #3366cc;
}
#third_link:visited {
  color: #3366cc;
}
#third_link:hover {
  color: #2d8653;
}
/*-------------------------------------------------------------------------------------------------*/

/*Kontakt*/
/*-------------------------------------------------------------------------------------------------*/


#contact_container{
    display: flex;
    justify-content: center;
}

#contact_box{
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 95%;
    width: auto;
    min-width: 40%;
    margin: 1.25rem;
    padding: 1.875rem;
    opacity: 90%;
    display: flex;
    border-width: 0.313rem;
    border-style: inset;
    justify-content: space-between;
}


#contact_box h1{
    color: #000000;
    font-family: serif, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: lighter;
    text-align: center;
}

#contact_box p{
    color: #000000;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    margin: 2.5rem 0;
    line-height: 1.563rem;
}

#contact_box p a{
    color: #663399;
    cursor: pointer;
    text-decoration: underline;
}

#knt_dat{
    display: flex;
    justify-content: space-between;
}

#fgu{
    margin-right: 2.5rem;
}

#stuehle_bild{
    height: 25rem;
    width: auto;
    opacity: 1;
    border-width: 0.5rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 1px 1px 20px 1px #000000;
}

#demo{
    padding-top: 3.438rem;
    font-size: 0.938rem;
    font-weight: bold;
}

#gage{
    text-align: center;
}


/*-------------------------------------------------------------------------------------------------*/

/*Impressum*/
/*-------------------------------------------------------------------------------------------------*/
#impr_main {
    height: 100%;
}
.impressum {
  background-color: #ffffff;
    height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3.125rem;
  margin-bottom: 3.625rem;
}

#impr {
  color: #000000;
  margin: 0.625rem 0;
}

/*-------------------------------------------------------------------------------------------------*/

/*Footer*/
/*-------------------------------------------------------------------------------------------------*/

footer {
  background-color: #101113;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 15%;
}

footer h4 {
  color: #ffffff;
  font-family: "Arial", "Trebuchet", serif;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
}

footer p {
  margin-top: 0.625rem;
  color: #ffffff;
  font-size: 0.75rem;
  font-family: "Arial", "Trebuchet", serif;
}

footer a{
    color: #ffffff;
    text-decoration: underline;
}

footer a:hover{
     color: #945738;
}

#telefonnummer {
  margin-bottom: 1.25rem;
}

.rechtliches {
  display: flex;
}

/*-------------------------------------------------------------------------------------------------*/

/*--media-quaries smartphone größe--*/

@media screen and (max-width: 1040px) {
  .div2 {
    display: flex;
    flex-direction: column;
  }

  .duobild {
    margin: 0;
  }

  #duobild {
    height: auto;
    width: 25rem;
    max-width: 100%;
  }

  .div4 {
    display: flex;
    flex-direction: column;
  }

  .div5 {
    margin: 0 15% 3.75rem;
    display: flex;
    flex-direction: column;
  }

  .gesang_bild {
    margin: 10% 0;
  }

  #mike {
    height: auto;
    width: 100%;
    max-width: 18.75rem;
  }

  .mike_text {
    margin: -0.625rem;
  }

  .div6 {
    margin: 3.75rem 15%;
    display: flex;
    flex-direction: column;
  }

  .huete {
    order: 1;
  }

  .solo_prog {
    order: 2;
  }

  .div8 {
    margin: 0 15% 3.75rem;
    display: flex;
    flex-direction: column;
  }

  .bass_bild {
    margin: 10% 0;
  }

  #wolle {
    height: auto;
    width: 100%;
    max-width: 18.75rem;
  }

  .wolle_text {
    margin: 0;
  }
    
#contact_box{
    display: flex;
    justify-content: center;
    align-items: center;
}
    
#knt_dat{
    display: flex;
    flex-direction: column;
    
}
    
#stuehle_bild{
    height: 18.75rem;
    width: 13.75rem;
}
    
    #demo{
    padding-top: 0;
    font-size: 0.938rem;
    font-weight: bold;
}
}

@media screen and (max-width: 960px) {
  /* ------- Bürgermenü ------ */
  .background-bmenu,
  ul,
  span {
    transition: 200ms;
  }

  p {
    transition: 10ms;
  }

  .icon-bmenu,
  .checkbox-bmenu {
    display: unset;
  }

  .background-bmenu {
    opacity: 0;
    background-color: #ffffff;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(-100vw, 0);
  }

  .ul-bmenu {
    position: absolute;
    transform: translate(-100vw, 0);
    z-index: 100;
    display: grid;
    top: 3.563rem;
    left: 0;
    padding: 1rem 15% 1.625rem 15%;
    width: 100vw;
    background-color: #ffffff;
  }

  .ul-bmenu li {
    margin: 0;
  }

  .checkbox-bmenu:checked ~ .ul-bmenu,
  .checkbox-bmenu:checked ~ .background-bmenu {
    transform: translate(0, 0);
  }

  .checkbox-bmenu {
    position: absolute;
    right: 14%;
    top: 0.625rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 10;
    opacity: 0;
    margin: 0;
  }

  .checkbox-bmenu:checked {
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
  }

  span {
    background-color: #101113;
    width: 1.875rem;
    height: 0.188rem;
    display: block;
    margin: 0.625rem 0 0 2.5rem;
    z-index: 2000;
    transition: 10ms;
  }

  span:last-of-type {
    margin: 0.313rem 0 0 2.5rem;
  }

  .icon-bmenu p {
    font-size: 0.75rem;
    margin: 0.125rem 0 0 2.5rem;
    transition: 10ms;
    color: #101113;
  }

  .checkbox-bmenu:checked ~ .icon-bmenu > span:first-of-type {
    transform: rotate(45deg) translate(0.313rem, 0.375rem);
  }

  .checkbox-bmenu:checked ~ .icon-bmenu > span:last-of-type {
    transform: rotate(-45deg);
  }

  .checkbox-bmenu:checked ~ .icon-bmenu > p {
    opacity: 0;
  }
}

@media screen and (max-width: 780px) {
  label.hamburg {
    display: block;
    background: #555;
    width: 4.688rem;
    height: 3.125rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.25rem;
  }

  input#hamburg {
    display: none;
  }

  .line {
    position: absolute;
    left: 0.625rem;
    height: 0.25rem;
    width: 3.438rem;
    background: #fff;
    border-radius: 0.125rem;
    display: block;
    transition: 0.5s;
    transform-origin: center;
  }

  .line:nth-child(1) {
    top: 0.75rem;
  }
  .line:nth-child(2) {
    top: 1.5rem;
  }
  .line:nth-child(3) {
    top: 2.25rem;
  }

  #hamburg:checked + .hamburg .line:nth-child(1) {
    transform: translateY(0.75rem) rotate(-45deg);
  }

  #hamburg:checked + .hamburg .line:nth-child(2) {
    opacity: 0;
  }

  #hamburg:checked + .hamburg .line:nth-child(3) {
    transform: translateY(-0.75rem) rotate(45deg);
  }

  #hamburg:checked + .hamburg .line h1 {
    font-size: 1.188rem;
    font-family: "Arial", "Trebuchet", serif;
  }

  p {
    font-size: 0.875rem;
    font-family: "Arial", "Trebuchet", serif;
    line-height: 1.3;
  }

  #startbild {
    height: auto;
    max-width: 100%;
    align-self: center;
    text-align: center;
  }

  .kazoo {
    margin: 0 0;
  }

  #kazoobild {
    height: auto;
    max-width: 100%;
    min-width: 21.875rem;
  }
}