header#landing-header {
  /* padding: min(20vmin, 200px) var(--px) var(--land-head-pb); */
  /* padding: var(--land-head-py) var(--px); */
  padding: 15vh var(--px) 0;
  height: 100vh;
  /* TODO change url to https://wahlbuddy.org */
  background-image: url("https://wahlbuddy.org/images/landing/landingpage_headline_background.png");
  /* background-size: var(--head-bg-size); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--head-bg-pos);
  /* background-position: 0 0; */
}
header#landing-header h1 {
  font-family: "Kaisei";
  font-size: var(--land-h1-fs);
}
/* img#landing-header-image {
  top: 0;
  left: 0;
  z-index: -1;
  height: 100vh;
} */
header#landing-header .text-button-wrapper {
  /* margin-top: var(--land-tbhold-mt); */
}
header#landing-header .text-button-holder {
}
/* header#landing-header .text-button-holder p, */
header#landing-header .text-button-holder button {
  font-size: var(--land-head-p-fs);
}
header#landing-header .text-button-holder button {
  margin-top: calc(.5* var(--land-tbhold-mt));
  cursor: pointer;
}
main {
  /* border: 1px dashed red; */
  margin-top: calc(2 * var(--gl-mt));
  padding: 0 var(--px);
}
main > h2 {
  font-weight: 900;
  width: var(--ui-w);
  font-size: var(--btw-fs);
  color: var(--sec-col);
}
/* main h2 {
  font-weight: 2000;
} */
main .ui-elements {
  margin-top: var(--gl-mt);
  border: 1px solid #777;
  border-radius: 10px;
  padding: min(2vmin, 20px) min(2vmin, 20px) var(--ui-pb);
  height: var(--ui-h);
}
main .ui-elements .select-holder {
  /* border: 1px solid red; */
}
main .ui-elements .select-holder .only-select-container .select-el.main-topic {
  inset: 0;
  width: 100%;
  font-size: calc(.8 * var(--h5-fs));
  font-weight: 500;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: var(--white-col);
  margin-bottom: var(--select-mb);
  padding: var(--select-py) min(2vmin, 10px);
  color: var(--sec-col);
}
main .ui-elements .select-holder > p {
  margin-bottom: var(--lab-mb);
  font-size: calc(.8 * var(--h5-fs));
  color: var(--sec-col);
}
main .ui-elements .select-holder select {
  -webkit-appearance: none;
  appearance: none;
  font-size: calc(.8 * var(--h5-fs));
  font-weight: 500;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: var(--white-col);
  margin-bottom: var(--select-mb);
  padding: var(--select-py) 0;
  color: var(--sec-col);
  min-height: var(--sel-mh);
}
main .ui-elements .select-holder .only-select-container.parties {
  width: var(--ppicker-w);
}
main .ui-elements .select-holder select#main-topic-picker {
  width: 100%;
}
main .ui-elements .select-holder select.party-pickers {
  width: var(--ppicker-w);
  opacity: 0;
}
main .ui-elements .select-holder .select-el {
  pointer-events: none;
  min-height: var(--sel-mh);
}
main .ui-elements .select-holder .select-el.part-picker.el1 {
  top: 0;
  left: 0;
  width: 100%;
  font-size: calc(.8 * var(--h5-fs));
  font-weight: 500;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: var(--white-col);
  margin-bottom: var(--select-mb);
  color: var(--sec-col);
  padding: var(--select-py) min(2vmin, 10px);
}
main .ui-elements .select-holder .select-el.part-picker.el2 {
  top: 0;
  left: 0;
  width: 100%;
  font-size: calc(.8 * var(--h5-fs));
  font-weight: 500;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: var(--white-col);
  margin-bottom: var(--select-mb);
  color: var(--sec-col);
  padding: var(--select-py) min(2vmin, 10px);
}
main .ui-elements .compare {
  width: var(--ui-btn-w);
  border: none;
  font-size: var(--select-fs);
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  pointer-events: auto;
  background-color: var(--tert-col);
  color: var(--white-col);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: var(--select-mb);
  padding: var(--select-py) 0;
}
main .ui-elements .compare:hover {
  background-color: var(--tert-col-l-10);
}
main .ui-elements .error-holder {
  background-color: var(--red-col-l-20);
  padding: var(--er-py) var(--er-px);
  border-radius: 5px;
  border: min(2vmin, 2px) solid var(--red-col-d-10);
}
main .ui-elements .error-holder p {
  color: var(--red-col-d-10);
  font-weight: 500;
}
main .kachel-holder {
  margin-top: calc(2 * var(--gl-mt));
}
main .kachel-holder .all-kacheln .kachel {
  width: var(--kach-w);
  aspect-ratio: 1;
  border-radius: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: var(--gl-mt);
}
main .kachel-holder .kachel.newsletter {
  background-image: var(--kach-news-img);
}
main .kachel-holder .kachel.events {
  background-image: var(--kach-events-img);
}
main .kachel-holder .kachel.podcast {
  background-image: var(--kach-podcast-img);
}
aside#slide-wrapper {
  width: 100%;
  aspect-ratio: 2;
  background-image: var(--slide-wrap-img);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: var(--gl-mt);
}
aside#slide-wrapper .single-amba-quote {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--amba-quote-pt) var(--px) 0;
}
aside#slide-wrapper .single-amba-quote p {
  font-size: var(--amba-quote-fs);
  text-shadow: 0 0 1px rgba(255, 255, 255, .2);
  text-align: center;
  margin-bottom: var(--amba-quote-h3-fs);
  font-weight: 700;
}
aside#slide-wrapper .single-amba-quote p.aussagender {
  font-size: var(--amba-aussagender-fs);
  text-align: center;
  font-weight: normal;
}
aside#slide-wrapper .dot-holder {
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
  gap: 20px;
}
aside#slide-wrapper .dot-holder .dot {
  width: var(--dot-w);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--gray-col);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  cursor: pointer;
}
aside#slide-wrapper .dot-holder .dot.active {
  background-color: var(--sec-col);
}
aside#slide-wrapper .dot-holder .dot:not(.active):hover {
  width: var(--dot-w);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--gray-col);
}

@media screen and (min-width: 0px) {
  header#landing-header {
    /* landingheader */
    /* --land-head-pb: min(40vmin);
    --land-head-pb: 70vmin; */
    --land-head-py: calc(15vh + min(10vmin, 100px));
    --land-tbhold-mt: min(15vmin, 150px);
    --land-h1-fs: calc(1.2 * var(--static-header-h1-fs));
    --land-head-p-fs: calc(.4 * var(--h2-fs));
    --head-bg-pos: 20% 0;
  }
  main {
    --main-mt: min(10vmin, 100px);
    --btw-fs: calc(.5 * var(--h2-fs));
    /* auswahl */
    --ui-w: 100%;
    --ui-btn-w: 100%;
    --ui-pb: min(5vmin, 50px);
    --intro-h1-fs: calc(.5 * var(--h2-fs));
    --lab-mb: min(2vmin, 30px);
    --select-mb: calc(2 * var(--lab-mb));
    --lab-fs: calc(.7 * var(--select-fs));
    --select-fs: var(--h5-fs);
    --compare-fs: var(--p-fs);
    --select-py: min(2vmin, 40px);
    --er-py: min(2vmin, 10px);
    --er-px: min(1.5vmin, 6px);
    --ppicker-w: 45%;
    /* kacheln */
    --kach-w: min(100%, 500px);
    /* TODO change url to https://wahlbuddy.org */
    --kach-news-img: url("https://wahlbuddy.org/images/landing/kachel_img_newsletter_417x417.png");
    --kach-events-img: url("https://wahlbuddy.org/images/landing/kachel_img_events_550x550.png");
    --kach-podcast-img: url("https://wahlbuddy.org/images/landing/kachel_img_podcast_550x550.png");
    --ui-h: auto;
    --sel-mh: min(5vmin, 52px);
  }
  aside#slide-wrapper {
    /* TODO change url to https://wahlbuddy.org */
    /* --slide-wrap-img: url("https://wahlbuddy.org/images/landing_page_ambassador_quotes_1000x660/landing_bottom_page_1000x600.jpg"); */
    --slide-wrap-img: url("https://wahlbuddy.org/images/landing/landing_page_ambassador_quotes_heller_1000x660.jpg");
    /* slideshow */
    --amba-quote-pt: min(5vmin, 50px);
    --amba-quote-fs: calc(.5 * var(--h5-fs));
    --amba-aussagender-fs: calc(.3 * var(--h5-fs));
    /* dot-holder */
    --dot-w: min(2vmin, 20px);
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(20vmin, 200px);
      --land-tbhold-mt: var(--land-head-py);
      --land-h1-fs: calc(1.9 * var(--static-header-h1-fs));
      --head-bg-pos: 0 0;
    }
    main {
      /* auswahl */
      --ui-w: 85%;
      --ui-h: 50vh;
      --intro-h1-fs: calc(.7 * var(--h2-fs));
      --lab-fs: var(--select-fs);
      --select-fs: var(--h4-fs);
      --compare-fs: var(--h4-fs);
      /* kacheln */
      --kach-w: 30%;
    }
    aside#slide-wrapper {
      /* slideshow */
      --amba-quote-pt: min(10vmin, 100px);
      --amba-quote-fs: calc(.8 * var(--h5-fs));
      --amba-aussagender-fs: calc(.5 * var(--h5-fs));
      /* dot-holder */
      --dot-w: min(2vmin, 20px);
    }
  }
}
@media screen and (min-width: 576px) {
  header#landing-header {
    /* landingheader */
    --land-head-py: calc(15vh + min(15vmin, 150px));
    /* --land-tbhold-mt: min(14vmin, 140px); */
    --land-h1-fs: calc(.9 * var(--static-header-h1-fs));
    --land-tbhold-mt: min(15vmin, 150px);
  }
  main {
    /* auswahl */
    --ui-w: 85%;
    --btw-fs: var(--h3-fs);
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(7vmin, 70px);
      /* --land-tbhold-mt: min(10vmin, 50px); */
      --land-h1-fs: 4rem;
    }
    main {
      --main-mt: min(3vmin, 30px);
      /* result window */
      --topic-main-mh: calc(var(--topic-sub-fs) * 2.5);
      /* auswahl */
      --ui-w: 95%;
      --ppicker-w: 30%;
      --ui-btn-w: 30%;
      --intro-h1-fs: calc(.45 * var(--h2-fs));
      --select-fs: calc(.9 * var(--h5-fs));
      --compare-fs: calc(.9 * var(--p-fs));
    }
  }
}
@media screen and (min-width: 768px) {
  header#landing-header {
    /* landingheader */
    --land-head-py: min(14vmin, 140px);
    --land-tbhold-mt: var(--land-head-py);
    --land-h1-fs: calc(.9 * var(--static-header-h1-fs));
    --land-head-p-fs: calc(.5 * var(--h2-fs));
  }
  main {
    --btw-fs: var(--h4-fs);
    --intro-h1-fs: var(--h5-fs);
    /* auswahl */
    --ui-w: 85%;
    --ppicker-w: 30%;
    --ui-btn-w: 30%;
    --lab-fs: calc(.9 * var(--select-fs));
    /* kacheln */
    --kach-w: min(30%, 300px);
  }
  aside#slide-wrapper {
    /* slideshow */
    --amba-quote-pt: min(5vmin, 50px);
    --amba-quote-fs: calc(.8 * var(--h5-fs));
    --amba-aussagender-fs: calc(.5 * var(--h5-fs));
    /* dot-holder */
    --dot-w: min(2vmin, 20px);
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(7vmin, 70px);
      --land-tbhold-mt: var(--land-head-py);
      --land-h1-fs: calc(1 * var(--static-header-h1-fs));
      --land-head-p-fs: 1rem;
    }
    main {
      --main-mt: min(3vmin, 50px);
      /* auswahl */
      --intro-h1-fs: calc(.45 * var(--h2-fs));
      --ui-w: 85%;
      --select-fs: calc(.9 * var(--h5-fs));
      --compare-fs: calc(.9 * var(--p-fs));
    }
    aside#slide-wrapper {
      /* slideshow */
      --amba-quote-pt: min(5vmin, 50px);
      --amba-quote-fs: calc(.8 * var(--h5-fs));
      --amba-aussagender-fs: calc(.5 * var(--h5-fs));
      /* dot-holder */
      --dot-w: min(2vmin, 20px);
    }
  }
}
@media screen and (min-width: 992px) {
  header#landing-header {
    /* landingheader */
    --land-head-py: min(10vmin, 100px);
    --land-tbhold-mt: var(--land-head-py);
    --land-h1-fs: calc(1 * var(--static-header-h1-fs));
    --land-head-p-fs: calc(.5 * var(--h2-fs));
  }
  main {
    /* auswahl */
    --ui-w: 90%;
  }
  aside#slide-wrapper {
    /* slideshow */
      --amba-quote-pt: min(5vmin, 50px);
    --amba-quote-h3-fs: min(3rem, 28px);
    --amba-quote-p-fs: calc(.9 * var(--amba-quote-h3-fs));
    /* dot-holder */
    --dot-w: min(3vmin, 30px);
    /* TODO change url to https://wahlbuddy.org */
    /* --slide-wrap-img: url("https://wahlbuddy.org/images/landing/landing_page_ambassador_quotes_heller_3000x2000.jpg"); */
    --slide-wrap-img: url("https://wahlbuddy.org/images/landing/landing_page_ambassador_quotes_heller_3000x2000.jpg");
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(7vmin, 70px);
      --land-tbhold-mt: var(--land-head-py);
      --land-h1-fs: calc(1.1 * var(--static-header-h1-fs));
      --land-head-p-fs: calc(.3 * var(--h2-fs));
    }
    main {
      --main-mt: min(10vmin, 100px);
      /* auswahl */
      --ui-w: 95%;
    }
    aside#slide-wrapper {
      --amba-quote-pt: min(5vmin, 50px);
      --amba-quote-fs: calc(.8 * var(--h5-fs));
      --amba-aussagender-fs: calc(.5 * var(--h5-fs));
    }
  }
}
@media screen and (min-width: 1200px) {
  header#landing-header {
    --land-h1-fs: calc(1.1 * var(--static-header-h1-fs));
  }
  main {
    /* ul */
    --ul-ps: min(3.5vmin, 20px);
  }
  aside#slide-wrapper {
    /* slideshow */
    --amba-quote-pt: min(10vmin, 100px);
    --amba-quote-h3-fs: min(3rem, 32px);
    --amba-quote-p-fs: calc(.9 * var(--amba-quote-h3-fs));
    /* dot-holder */
    --dot-w: min(2vmin, 20px);
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      --land-h1-fs: calc(1 * var(--static-header-h1-fs));
    }
    main {
      --main-mt: min(15vmin, 150px);
      /* auswahl */
      --ui-w: 95%;
    }
    aside#slide-wrapper {
      /* slideshow */
      --amba-quote-pt: min(13vmin, 130px);
    }
  }
}
@media screen and (min-width: 1400px) {
  header#landing-header {
    /* landingheader */
    --land-head-py: min(20vmin, 200px);
    --land-tbhold-mt: var(--land-head-py);
    --land-h1-fs: calc(1.2 * var(--static-header-h1-fs));
    --land-head-p-fs: calc(.5 * var(--h2-fs));
  }
  main {
    /* kacheln */
    --kach-w: min(30%, 500px);
  }
  aside#slide-wrapper {
    /* slideshow */
    --amba-quote-pt: min(15vmin, 150px);
    --amba-quote-h3-fs: min(5rem, 50px);
    --amba-quote-p-fs: calc(.9 * var(--amba-quote-h3-fs));
    /* dot-holder */
    --dot-w: min(2vmin, 20px);
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(10vmin, 100px);
      --land-tbhold-mt: var(--land-head-py);
      --land-h1-fs: calc(.9 * var(--static-header-h1-fs));
      --land-head-p-fs: calc(.5 * var(--h2-fs));
    }
    main {
      --main-mt: min(15vmin, 150px);
    }
  }
}
@media screen and (min-width: 1600px) {
  header#landing-header {
    --land-h1-fs: calc(1.3 * var(--static-header-h1-fs));
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
    }
    @media screen and (max-height: 1100px) {
      header#landing-header {
        --head-bg-pos: 0 30%;
      }
    }
  }
}
@media screen and (min-width: 1800px) {
  header#landing-header {
    --land-h1-fs: calc(1.3 * var(--static-header-h1-fs));
  }
  @media screen and (min-aspect-ratio: 1) {
    header#landing-header {
      /* landingheader */
      --land-head-py: min(13vmin, 130px);
      --land-tbhold-mt: var(--land-head-py);
      --land-h1-fs: calc(1.3 * var(--static-header-h1-fs));
      --land-head-p-fs: calc(.5 * var(--h2-fs));
    }
  }
}