@media screen and (max-width: 1200px) {
  :root {
    --main-header: 2rem;
    --header2: 1.2rem;
    --nav-font: 1.2rem;
    --font-p: 1.1rem;
  }
  .topnav_spacer {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .theme-text > img {
    filter: opacity(0.5);
    z-index: -10000;
  }

}

@media screen and (max-width: 800px) {
  .wide_back_img > .wide_back_img_text {
    width: 80vw;
    left: 10vw;
  }
  .wide_back_img > .wide_back_img_text > p {
    font-size: calc(var(--header2));
  }
  .font_body_mid {
    width: 80vw;
    margin-left: 10vw;
  }
  .banner > .banner-img {
    width: 50%;
  }
  .banner > .banner-text {
    padding-top: .5rem;
  }
  .topnav {
    height: 120px;
  }
  .logo_img {
    height: 120px;
    left: 21px;
    top: 43%;
  }
  .topnav > .logo_subtext {
    left: 29px;
    display: flex;
    gap: 5px;
    top: 58%;
  }
  .dropdown-content {
    top: 0;
  }
  .karte_body {
    flex-direction: column;
  }
  .karte_list > .Table {
    width: 100%;
  }
  .karte_list > .Table > tbody > tr > td {
    display:table-cell;
  }

  .karte_list {
    width: 100%;
  }
  .karte_content {
    width: 100%;
    gap: 5%;
  }
  .karte_content img {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .banner {
    flex-wrap: wrap;
  }
  .banner > .banner-img {
    width: 100%;
  }
  .banner > .banner-text {
    padding-top: .5rem;
  }
  .wide_back_img > .wide_back_img_text {
    top: 3rem;
  }
  .wide_back_img > .wide_back_img_text > p {
    font-size: calc(var(--header2) - 0.2rem);
  }
  .font_body_mid  {
    width: 80vw;
    left: 10vw;
    font-size: calc(var(--font-p) - 0.1rem);
  }
  td {
    display: block;
  }
  .theme-button > .theme-text > h2 {
    width: 90%;
  }
  footer > .container {
    flex-wrap: wrap;
  }
  footer > .container > .listblock {
    width: 100%;
  }
  .Pop-body {
    width: 90vw;
    max-height: 80vh;
  }
  .topnav > .logo_subtext > p {
    font-size: calc(var(--font-p) - 0.2rem);
  }
  .karte_content img {
    width: 70%;
  }
}

@media screen and (max-width: 450px) {
  :root {
    --font-p: 0.9rem;
    --main-header: 1.7rem;
    --header2: 1rem;
    --nav-font: 1rem;
  }
  .topnav-container > .sticky-area > .burger > .burger-bar {
    width: 30px;
    height: 3px;
    margin: 8px;
  }
  .topnav-container > .sticky-area > .burger > .burger-bar:nth-child(3) {
    margin-bottom: 5px;
  }
  .topnav > .logo_subtext > p {
    font-size: calc(var(--font-p) - 0.2rem);
  }
  .logo_img {
    top: 40%;
  }
  a.nav_link > img {
    width: 30px;
  }
  .burger-event > .burger-bar {
    right: 0px;
    bottom: 15px;
  }
  .burger-event > .burger-bar:nth-child(3) {
    margin-bottom: 8px !important;
  }
  .wideback {
    margin-bottom: 1rem;
  }
  .wideback > .font-body {
    top: 50%;
    position: absolute;
  }
  .wideback > .font-body > h1 , .wideback > .font-body > p  {
    width: 90vw;
  }
  .banner {
    flex-wrap: wrap-reverse;
    margin-bottom: 1rem;
  }
  .banner > .banner-img {
    width: 100%;
  }
  .banner > .banner-text {
    width: 100%;
    padding-left: 5vw;
  }
  .banner > .banner-text > p {
    width: 100%;
  }
  .banner > .banner-text > h1 {
    margin-top: 1rem;
  }
  .article {
    width: 100vw;
    margin-left: 0;
    margin-bottom: 1rem;
  }
  .article > h1 , .article > h2 , .article > p {
    margin-left: 5vw;
  }
  .article > .buffer {
    height: 0;
  }
  .theme-button > .angle {
    top: 0;
  }
  .multi-body {
    height: unset;
    margin-bottom: 1rem;
    aspect-ratio: 658 / 500; /* 2x img-width / img-height*/
  }
  .multi-body > .img-container {
    width: 50vw;
  }
  .multi-body > .img-container > .multi-img {
    width: 50vw;
    height: unset;
  }
  .multi-body > .img-container > .multi-img > img{

    height: 100%;
  }
  .rollover-body {
    width: 90vw;
    transform: translateX(-50%) translateY(-300px);
  }
  .rollover-body > section {
    flex-wrap: wrap;
  }
  .rollover-body > section > img {
    width: 95%;
  }
  .rollover-body > section > .name-field {
    width: 95%;
  }

}
@media screen and (max-width: 340px) {
  .topnav > .logo_subtext {
    flex-direction: column;
  }
  .topnav > .logo_subtext > p {
    line-height: calc(var(--font-p) - 0.2rem);
  }
}