@media screen and (max-width: 1920px) {
  .heroimg {top: -150px; }
}

@media screen and (max-width: 1280px) {
  .wrapper {width: 90%;}
}

@media screen and (min-width: 1025px) {
  .leftCol { float: left;  width: 400px; }
  .togglebtn:hover { color: var(--orange); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }     
  .rightCol {  width: calc( 100% - 430px);  margin-left: 30px; float: left; margin-top: 80px; }
  #karte { margin-top: 150px; }
}

@media screen and (max-width: 1024px) {
  .logo { margin: 0 auto; display: block; }
  .leftCol, .faq {  width: 100%; }
  #karte { margin-top: 80px; }
  .karte {  background-image: url(images/karte2.jpg); }
}

@media screen and (max-width: 768px) {
  .karte {  background-image: url(images/karte3.jpg); }
}

@media screen and (max-width: 650px) {
  .datum {  font-size: 2.8rem; }
  .infobox { padding: 30px;}
  .faq { padding: 40px 30px 30px 30px; margin-top: 50px; }
  .openit:after, .closeit:after { right: 0px;}
  #karte { margin-top: 50px; }
  .karte {  background-image: url(images/karte4.jpg); }
  .heroimg { top: -100px; background-size: 350%;}
  .btn.pfeil:after { left: -80px; background-size: 70%; transform: rotate(34deg);}
  .logo { width: 200px; float: right; margin-bottom: 50px; }
}