.infotag-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 25em 1fr 1fr;
  grid-template-areas:
   "titel titel titel infotagzeit infotagzeit"
   "infotagtelefon infotagnummer schulfilm social socialbutton"
   "livechat livechatbutton schulfilm feedback feedbackbutton"
   "praesentation praesentation praesentation praesentation praesentation"
   "infotag  infotag infotag infotag infotag";
  grid-gap: 1em 1em;
   
}

.zweig-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
   "titel titel infotagzeit infotagzeit"
   "zweig zweig zweig zweig"
   "infotagtelefon infotagnummer social socialbutton"
   "livechat livechatbutton zweighomepage zweighomepagebutton"
   ". videochatbutton . ."
   "infotag  infotag infotag infotag";
  grid-gap: 1em 1em;
   
}


/*
.bgimage {
  background: transparent url(images/infotagbg.jpg) top center no-repeat;
  background-size: contain;
}

.filter {
  background-color: rgba(255,255,255,0.7);
}
*/

.infotagfooter {
  display: block;
}

.ende {
  clear: both;
}

.infotagclearfix {
    content: " ";
    display: table;
}

.titel {
  grid-area: titel;
  align-self: end;
  margin: 0.5em 0 0 0;
}

.infotagzeit {
  grid-area: infotagzeit;
  align-self: end;
  justify-self: end;
  margin: 0;
  padding: 0;
  font-size: 150%;
}

.zweig {
  grid-area: zweig;
  align-self: end;
  padding: 0;
  margin: 0;
}

.infotag {
  grid-area: infotag;
  height: 100vh;
  background: transparent url(images/infotagbg.jpg) top center no-repeat;
  background-size: cover;
}

.infotagbox {
  width: 25em;
  background-color: rgba(255,255,255,0.8);
  margin: 0 auto;
  padding: 2em 0;
  /* box-shadow: 15px 15px 15px rgba(255,255,255,0.7); */
}

.infotag a {
  text-decoration: none;
}

.infotag a:hover {
  font-weight: bold;
}

a.ueberschrift {
  color: #333;
}

.infotagtelefon {
  grid-area: infotagtelefon;
  justify-self: end;
  align-self: center;
  padding: 0;
  margin: 0;
}

.infotagnummer {
  grid-area: infotagnummer;
  align-self: center;
}

.schulfilm {
  grid-area: schulfilm;
  justify-self: center;
}

.social {
  grid-area: social;
  justify-self: right;
  align-self: center;
  padding: 0;
  margin: 0;
}

.socialbutton {
  grid-area: socialbutton;
  align-self: center;
}

.facebook {
  display: inline-block;
  padding-right: 15px;
 
}

.instagram {
  display: inline-block;
}

.livechat {
  grid-area: livechat;
  justify-self: end;
  align-self: flex-start;
  padding: 0;
  margin: 0;
}

.livechatbutton {
  grid-area: livechatbutton;
  align-self: start;
}

.videochatbutton {
  grid-area: videochatbutton;
  align-self :start;
}

.feedback { 
  grid-area: feedback;
  justify-self: end;
  text-align: right;
  align-self: start;
  padding: 0;
  margin: 0;
}

.feedbackbutton {
  grid-area: feedbackbutton;
  align-self: start;
}

.praesentation {
  grid-area: praesentation;
  justify-self: center;
}

.zweighomepage {
  grid-area: zweighomepage;
  text-align: right;
  padding: 0;
  margin: 0;
}

.zweighomepagebutton {
  grid-area: zweighomepagebutton;
}

.zweigbutton {
  display: block;
  width: 20em;
  height: 3em;
  border: none; 
  margin: 1em auto;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

.navibutton {
  display: block;
  width: 10em;
  height: 1.5em;
  border: none;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  
}

.schule {
  background-color: rgb(240,240,240);
  color: #333;
}

.kunstzweig {
  background-color: rgb(190,46,33);
  color: #fff;
}

.mediendesign {
  background-color: rgb(64,129,186);
  color: #fff;
}

.instrumental {
  background-color: rgb(243,214,52);
  color: #333;
}

.naturwissenschaftlich {
  background-color: rgb(92,164,65);
  color: #fff;
}

.besondersmusikalisch {
  background-color: rgb(215,123,45);
  color: #fff;
}

.infotagsection {
  grid-area: infotagsection;
  background-color: rgba(255,255,255,0.9);
  padding: 20px;
  margin: 10px 0; 
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.1); 
}

.infotagsection p {
  /* display: table-cell; */
  vertical-align: middle;
  font-size: 130%;
  /* height: 150px; */
}

.grid-footer {
  clear: both;
  padding: 20px;
  display: grid;
  grid-template-columns: 150px 150px 150px 1fr;
  grid-template-areas:
    "gymnasium mint singend ."
    "copy copy copy copy";
  grid-gap: 1em 3em;
}

.mint {
  grid-area: mint;
}

.gymnasium {
  grid-area: gymnasium;
}

.singend {
  grid-area: singend;
}

.copy {
  grid-area: copy;
}

@media (max-width: 1000px) {
   
  .infotag-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "titel titel titel titel "
      "infotagzeit infotagzeit infotagzeit infotagzwit"
      "infotagtelefon infotagtelefon social social"
      "infotagnummer infotagnummer socialbutton socialbutton"
      "livechat livechat  feedback feedback"
      "livechatbutton livechatbutton feedbackbutton feedbackbutton"
      "schulfilm schulfilm schulfilm schulfilm"
      " praesentation praesentation praesentation praesentation"
      "infotag  infotag infotag infotag ";
    grid-gap: 1em;
  }

  .zweig-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "titel titel titel titel "
      "infotagzeit infotagzeit infotagzeit infotagzeit"
      "zweig zweig zweig zweig"
      "infotagtelefon infotagtelefon social social"
      "infotagnummer infotagnummer socialbutton socialbutton"
      "livechat livechat  zweighomepage zweighomepage"
      "livechatbutton livechatbutton zweighomepagebutton zweighomepagebutton"
      "videochatbutton videochatbutton . ."
      "infotag  infotag infotag infotag ";
    grid-gap: 1em;
  }

  .infotagfooter {
    display: none;
  }

  .infotagtelefon {
    grid-area: infotagtelefon;
    justify-self: center;
    align-self: end;
  }

  .infotagnummer {
    grid-area: infotagnummer;
    justify-self: center;
  }

  .infotagzeit {
    justify-self: start;
  }
 
  .social {
    justify-self: center;
    align-self: end;
  }

  .socialbutton {
    justify-self: center;
  }

  .feedback {
    justify-self: center;
    align-self: end;
  }

  .feedbackbutton {
    justify-self: center;
  }

  .livechat {
    justify-self: center;
    align-self: end;
  }

  .livechatbutton {
    justify-self: center;
  }

  .videochatbutton {
    justify-self: center;
  }

  .zweighomepage {
    justify-self: center;
    align-self: end;
    text-align: center;
  }
  
  .zweighomepagebutton {
    justify-self: center;
  }

  .grid-footer {
    display: none;
    padding: 20px;
    display: grid;
    grid-template-columns: 130px 130px 1fr;
    grid-template-areas:
      "gymnasium singend ."
      "mint singend ."
      "copy copy copy";
    grid-gap: 1em 1em;
  }

}