#cstm-header {
  width: 100%;
  border: 1px solid red;
}
#cstm-header nav ul li * {
  font-size: .6rem;
}
#cstm-header #switching-link-katalog {
  cursor: pointer;
}

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./helveticaneue/helveticaneue.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./inter/inter_font.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kaisei';
  font-style: normal;
  font-weight: 4000;
  font-display: swap;
  src: url("./header_titles/kaisei_haronuomi.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  font-family: "Inter";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  font-size: var(--rem);
}

h1 {
  font-size: 3.5rem;
}
.subsite-h1 {
  font-size: var(--main-h1-fs);
  font-weight: 700;
}
h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1rem;
}

p {
  font-size: calc(.8 * var(--h5-fs));
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}
.default-half-mt {
  margin-top: calc(.5 * var(--gl-mt)) !important;
}
.default-mt {
  margin-top: var(--gl-mt) !important;
}
.default-button {
  background-color: transparent;
  border: 1px solid var(--white-col);
  border-radius: 5px;
  padding: min(2vmin, 20px) min(3vmin, 30px);
}
#scroll-to-selects {
  border: none;
}
.sec-button {
  background-color: var(--sec-col);
  color: var(--white-col);
  border: 1px solid var(--white-col);
  border-radius: 5px;
  padding: min(2vmin, 20px) min(3vmin, 30px);
}
aside#blue-banner {
  padding: var(--ban-py) var(--px);
}
aside#blue-banner a {
  font-weight: 500;
  font-size: var(--p-fs);
  cursor: pointer;
}
header#landing-header header#consistent-header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
header#consistent-header {
  padding: var(--ban-py) var(--px);
  height: 15vh;
}
header#consistent-header.header-from-cstm_landing,
header#consistent-header.header-from-landing {
  background-color: var(--quart-col) !important;
}
#logo {
  height: var(--logo-h);
  aspect-ratio: 3;
  /* for dev use http://0.0.0.0 instead of https://wahlbuddy.org */
  /* TODO change url to https://wahlbuddy.org */
  background-image: url("https://wahlbuddy.org/images/logos/wahlbuddy_headline_logo.svg");
  /* background-image: url("http://0.0.0.0:8000/images/logos/wahlbuddy_headline_logo.svg"); */
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 45%;
}
header#consistent-header .header-studo-logo {
  width: var(--head-a-w);
  margin-right: var(--head-a-me);
}
header#consistent-header .header-studo-logo img {
  width: 100%;
}
header#consistent-header #mobile-nav-button {
  width: var(--mnav-w);
  aspect-ratio: 1;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
header#consistent-header #mobile-nav-button .bar {
  width: 60%;
  height: min(1vmin, 3px);
  background-color: var(--white-col);
  border-radius: 100px;
  top: 50%;
  left: 50%;
  pointer-events: none;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
header#consistent-header #mobile-nav-button .bar.bartop {
  -webkit-transform: translate(-50%, -350%);
      -ms-transform: translate(-50%, -350%);
          transform: translate(-50%, -350%);
}
header#consistent-header #mobile-nav-button .bar.barmid {
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
header#consistent-header #mobile-nav-button .bar.barbot {
  -webkit-transform: translate(-50%, 250%);
      -ms-transform: translate(-50%, 250%);
          transform: translate(-50%, 250%);
}
header#consistent-header #mobile-nav-button.active {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
header#consistent-header #mobile-nav-button.active .bar.bartop {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
header#consistent-header #mobile-nav-button.active .bar.barmid {
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0;
  opacity: 0;
}
header#consistent-header #mobile-nav-button.active .bar.barbot {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      -ms-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

nav#mobile-nav {
  width: var(--nav-w);
  background-color: var(--sec-col);
  right: 0;
  -webkit-box-flex: 5;
      -ms-flex: 5;
          flex: 5;
  -webkit-transform: translate(100%, 0);
      -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  -o-transition: transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  z-index: 7;
}
nav#mobile-nav.header-from-landing {
  background-color: var(--quart-col);
}
nav#mobile-nav.active {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
nav#mobile-nav.active {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
nav#mobile-nav #newsletter-nav-link {
  cursor: pointer;
}
nav#mobile-nav ul li p,
nav#mobile-nav ul li a {
  font-size: var(--nav-p-fs);
}
nav#mobile-nav ul li {
  margin: min(1vmin, 5px) 0;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  -o-transition: transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  color: var(--white-col) !important;
}
nav#mobile-nav ul li.only-headline,
nav#mobile-nav ul li.isolated-link {
  font-weight: 700;
  margin-top: min(2vmin, 20px);
}
nav#mobile-nav ul li:not(.only-headline) a,
nav#mobile-nav ul li:not(.isolated-link) a,
nav#mobile-nav ul li:not(.isolated-link) {
  padding-left: min(2vmin, 20px);
}
nav#mobile-nav ul li.fat-headline:not(:first-of-type) {
  margin-top: var(--nav-fat-mt);
}
nav#mobile-nav ul li > a {
  color: var(--white-col) !important;
  font-size: var(--nav-p-fs);
}

.orange-banner {
  width: 100%;
  background-color: var(--tert-col);
  padding: min(3vmin, 20px) 0;
}
.word-holder {
  width: 100%;
  background-color: var(--tert-col);
}
.word-holder .moving-banner {
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  background-color: var(--tert-col);
  animation: orangebanner 10s infinite linear;
}
.word-holder .moving-banner p {
  color: white;
  font-size: var(--or-ban-fs);
}


aside#newsletter-popup {
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.4);
  transition: all .3s ease;
  opacity: 0;
  pointer-events: none;
}
aside#newsletter-popup.active {
  opacity: 1;
  pointer-events: auto;
}
aside#newsletter-popup .actual-popup {
  background-color: var(--white-col);
  width: min(90%, 500px);
  /* height: min(80vmin, 800px); */
  /* padding: min(15vmin, 150px) min(5vmin, 50px); */
  border-radius: min(3vmin, 15px);
}
aside#newsletter-popup .actual-popup img {
  width: var(--qr-img-w);
  margin-top: min(5vmin, 50px);
  margin-bottom: min(5vmin, 50px);
}
aside#newsletter-popup .actual-popup p {
  margin-top: min(5vmin, 50px);
}
aside#newsletter-popup .actual-popup button {
  cursor: pointer;
  border-radius: 50%;
  width: min(20%, 40px);
  aspect-ratio: 1;
}
aside#newsletter-popup .actual-popup button i {
  font-size: calc(.8 * var(--h5-fs));
}
aside#newsletter-popup .actual-popup h3,
aside#newsletter-popup .actual-popup a {
  color: var(--sec-col);
}
@keyframes orangebanner {
  from {
    transform: translate(0,0);
  }
  to {
    transform: translate(-50%,0);
  }
}

/* NUR SOLANGE ES FÜR EVENTS UND WHATSAPP KEINE ECHTEN FEATURES GIBT: */
#placeholder {
  inset: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.7);
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}
#placeholder.active {
  opacity: 1;
  pointer-events: auto;
}
#placeholder .popup-window {
  width: min(80%, 500px);
  height: min(80%, 800px);
  border: 3px solid var(--sec-col);
  border-radius: 15px;
}
#placeholder .popup-window h4 {
  text-align: center;
}
#placeholder .popup-window button {
  width: min(30%, 100px);
  border: none;
  font-size: var(--p-fs);
  padding: min(3vmin, 20px) 0;
  font-weight: 500;
  border-radius: 5px;
  background-color: var(--sec-col);
  color: var(--white-col);
  cursor: pointer;
}

#footer {
  padding: var(--ft-py) var(--px);
}
#footer p,
#footer a {
  color: var(--prim-col);
  font-size: calc( .75 * var(--p-fs));
}
#footer .link-holder {
  width: var(--lhold-w);
}
#footer .link-holder .column {
  width: 30%;
}
#footer .link-holder .column.who-for-vote {
  width: auto;
}
#footer .link-holder .column > p {
  font-weight: 700;
}
#footer .link-holder .column > p + a {
  margin-top: min(3vmin, 30px);
}
#footer .link-holder .column a {
  text-decoration: underline;
}
#footer .additional-link {
  width: 30%;
  font-weight: 700;
  text-decoration: underline;
}
#footer .wider {
  width: 40% !important;
}
#footer .reference-links-holder {
  /* margin-top: min(5vmin, 50px); */
}
#footer .reference-links-holder p,
#footer .reference-links-holder p a {
  font-size: calc(.5 * var(--p-fs));
}
#footer .socials-logo-holder {
  width: 30%;
}
#footer .socials-logo-holder .logo-link {
  width: var(--log-w);
}
#footer .socials-logo-holder .logo-link img {
  width: 100%;
  height: 100%;
}
#footer .socials-logo-holder .socials-links {
  width: min(7%, 20px);
  aspect-ratio: 1;
  margin: 0 min(.5vmin, 3px);
}
#footer .socials-logo-holder .socials-links img {
  width: 100%;
  height: 100%;
}
#footer .website-links {
  margin-top: min(15vmin, 200px);
}

/* CUSTOMIZER */
main.cstm-main {
  padding-top: min(20vmin, 100px) !important;
}
.cstm-save-changes-btn {
  top: 30px;
  right: min(5vmin, 30px);
  cursor: pointer;
}