@charset "UTF-8";

@font-face {
  font-family:'arial';
}
@font-face {
  font-family:'arialnarrow';
  src:url(Arial Narrow.otf) format("truetype");
}

:root {
  --padding: 0;
  --font-family-sans: "arial", Helvetica, Arial, sans-serif;
  --font-family-mono: "arial", Helvetica, Arial, sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
  font-size: 12px;
}

html {
  background-color: #ececec !important;
  overflow-x: hidden;
  scroll-behavior: smooth !important;
}

body{
  color: #212121;
  hyphens: manual;
  margin: 0 0 0 0;
  height:auto;
  width: 100vw;
  overflow-x: hidden;
  font-family:'Helvetica';
  font-size: 2rem;
  line-height: 1.2;
  /*letter-spacing: -0.15px;*/
}

#logo{
  width: 100vw;
  height: 100vh;
  position: fixed;
  align-content: center;
  vertical-align: middle;
  background-color: yellow;
  opacity: 0.5;
  z-index: 999999999999999999999999999999999;
}
.hidden {
  display: none;
}




/* ------ Ticker ------ */

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: relative;
  top: 4rem;
  width: 100%;
  overflow: hidden;
  height: 4.5rem;
  animation: colorchange 300s infinite;
  padding-left: 40px;
}

.ticker {
  display: inline-block;
  height: 4.5rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 150s;
  animation-duration: 150s;
}
.ticker_item {
  display: inline-block;
  padding: 0 2rem;
  animation: textcolorchange 300s infinite;
}
.ticker_item h1 {
  color: #ececec;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0.25rem;
}





/* width */
::-webkit-scrollbar {
  width: 4vw;
}
/* Track */
::-webkit-scrollbar-track {
  background: #212121;
  width: 10px;
  animation: scrollbarcolor 100s infinite;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ececec;
}



button:focus {
    outline: none;
}

.scroller {
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory !important;
}
.scroller section {
  scroll-snap-align: start;
}

/* width */
#info::-webkit-scrollbar {
  width: 0px;
}
/* Track */
#info::-webkit-scrollbar-track {
  width: 0px;
}

em {
  font-weight: 600;
  font-style: normal;
}
a {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-thickness: 0.6rem !important;
  text-decoration-skip-ink: auto;
  text-decoration-skip: none;
  letter-spacing: 0.25rem;
  word-spacing: 0.25rem;
}
.initiativen a {
  text-decoration: none;
  letter-spacing: 0.25rem;
  word-spacing: 0.25rem;
}
p a, ol a, table a {
  text-decoration: underline;
  text-underline-position: auto;
  text-decoration-thickness: 0.25rem !important;
  text-decoration-skip-ink: auto;
  text-decoration-skip: none;
  letter-spacing: 0.25rem;
  word-spacing: 0.25rem;
}

.info-box a:hover {
  color: lightgrey;
  letter-spacing: 0.25rem;
  word-spacing: 0.25rem;
  mix-blend-mode: multiply;
}

details[open] {
  background-color: #111;
  color: lightgrey;
}


/*    NEU !!!    DETAILS  */
.info-box details {

}
details summary::-webkit-details-marker {
  display:none;
}




/* Abschnitte */
.header {
  display: block;
  position: fixed;
  top:0;
  width:100vw;
  height: 4.1rem;
  z-index: 999999999999999999999999;
  animation: colorchange 300s infinite;
}
.header h1 {
  color: #ececec;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -1px;
  padding-bottom: 1.25rem;
}

.header .header-link {
  display: inline-block;
  padding-left: 40px;
  padding-right: 0px;
}
.zeile{
  width: 100vw;
  overflow: hidden;
}


.footer {
  display: block;
  width:100vw;
  height: 4.75rem;

  position: fixed;
  bottom: 0;
  padding: 0;
  background-color: #212121;
  overflow-x: hidden;
  padding-right: 1vw;
  animation: colorchange 300s infinite;
  z-index: 99999999;

  overflow: hidden;
  vertical-align: middle;
  align-items: center;
}


.footer button{
  text-align: left;
  vertical-align: sub;
  color: #ececec;
  padding-left: 40px;
  display: inline-block;
}
.footer button a {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-thickness: 0.6rem !important;
  text-decoration-skip-ink: auto;
  text-decoration-skip: none;
  letter-spacing: 0.25rem;
}
.footer h1{
  font-size: 3.4rem;
  padding-top: 0;
  padding-right: 1vw;
  padding-left: 10px;
  padding-bottom: 0.5rem;
  line-height: 1.25;
}

.footer .burger-icon{
  padding-top: 1rem;
  position: absolute;
  float: right;
  right: 10px;
}
.imprint, .datenschutz, .kontakt, .presse, .spenden, .supporter {
  z-index: 1000000;
}


#footer-details {
  display: none;
  width:100vw;
  height: 100vh;
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  animation: colorchange2 300s infinite;
  top:0;
  scroll-behavior: smooth;
  z-index:20;
}
#join-details {
  display: block;
  animation: textcolorchange 300s infinite;

}
#footer-details .info-box {
  color:#ececec;
  animation: none;
}


.footer p {
  padding-top: 0.5vw;
  padding-right: 1vw;
  padding-left: 40px;
}
.footer h2{
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  padding-top: 2vw;
  padding-right: 1vw;
  padding-left: 40px;
}
.footer ul{
  padding-top: 1vw;
  padding-bottom: 1vw;
  padding-right: 1vw;
  padding-left: 40px;
}
.footer li{
  display: block;
  width: 100%;
  text-align: left;
}
#footer-details .info-box ol, #join-details .info-box ol {
  margin-top: 0;
}

#footer-details .info-box li, #join-details .info-box li {
  padding-left: 8vw;
}
#footer-details .info-box h2, #join-details .info-box h2 {
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 2;
}
#footer-details .info-box a, #join-details .info-box a {
  text-decoration-thickness: 0.1rem !important;
  text-underline-position:  under;
  text-decoration-skip-ink: auto;
  text-decoration-skip: none;
}



.hashtag img {
  width: auto;
  height:5vh;
  overflow: hidden;
}

@keyframes wind{
from { background-position: 0px 20px}
to { background-position: 600px 20px}
}

.abstand{
  height: 4.65rem;
  position: relative;
}

.info-box {
  display: grid;
  grid-template-columns: [first] 32vw [line2] 32vw [line3] 32vw [end];
  grid-template-rows: auto 1fr;
  grid-column-gap: 0px;
  list-style: none;
  width: 100vw;
  /*min-height: 70vh;*/
  padding-top: 8rem;
  padding-left: 0px;
  padding-right: 1vw;
  animation: textcolorchange 300s infinite;
  padding-bottom: 100px;
}

.info-box p {
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  /*padding-right: 14vw;*/
  padding-left: 8vw;
  font-family: "Helvetica", sans-serif;
  display: inline;
  margin-bottom: 4rem;
  max-width: 700px;
  text-align: left;
  padding-bottom: 3rem;
  padding-left: 0;
}
.info-box .supporter-logo {
  width: auto;
  height: 7.5rem;
}

.info-box a {
  margin:0;
  padding: 0;
  display: inline;
  margin:0px;
}
/*
.info-box a::after {
  display: inline-block;
    content: url('icons8-link-64.png');
    width:35px;
    height:35px;
    color: black;
    text-decoration: none !important;
}*/

.info-box h1 {
  font-size: 3.4rem;
  line-height: 1.25;
  letter-spacing: -1px;
  padding-bottom: 3rem;
  padding-left: 40px;
  padding-right:10px;
}
.info-box h2 {
  padding-left: 12rem;
}

.info-box h3 {
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -1px;
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 3;
}

.info-box ol {
  margin-top: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  line-height: 2;
}
.info-box ul, .info-box table {
  margin-bottom: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
}
.liste ul {
  margin-bottom: 4rem;
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 3;
}
.info-box table {
  padding-right: 6vw;
}
.info-box table td:first-child {
  width: 8vw;
}

.info-box ol li, .info-box ul li{
  text-align: left;
  width: 100%;
  padding-left: 8vw;
  padding-bottom: 4rem;
}



/*    NEU !!!    DETAILS  */
.info-quote  {
  display: grid;
  grid-template-columns: 20vw 30vw 30vw;
  grid-template-rows: auto auto auto;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  list-style: none;
  margin-bottom: 40px;
  top: 8rem;
  width: 96vw;
  left: 0;
  padding: 6px 6px 6px 6px;
  position: relative;
}
.info-quote .quote {
  display: inline-grid;
  list-style: none;
  animation: textcolorchange 300s infinite;
  background-color: #ececec;
  overflow-x:hidden;
  overflow-y: auto;
}
.long {
  grid-column-start: 2;
  grid-column-end: 4;
  padding-right: 25vw;
}
.info-quote details {
  display: inline-grid;
}
.info-quote .quote {
  padding-left: 0;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] {
  background-color: #212121;
  color: white;
}
.info-quote h1 {
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -1px;
  padding-bottom: 3rem;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 1rem;
}
.info-quote p {
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  padding-right: 40px;
  padding-left: 40px;
  font-family: "Helvetica", sans-serif;
  display: inline;
  margin-bottom: 4rem;
  max-width: 700px;
}

.info-quote h2 {
  padding-left: 12rem;
}

.info-quote h3 {
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -1px;
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 3;
}

.info-quote ol {
  margin-top: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  line-height: 2;
}
.info-quote ul, .info-quote table {
  margin-bottom: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
}

.info-quote table {
  padding-right: 6vw;
}
.info-quote table td:first-child {
  width: 150px;
  padding-left: 40px;
}

.info-quote ol li, .info-quote ul li{
  text-align: left;
  width: 100%;
  padding-left: 8vw;
}

/*    ENDE: NEU !!!     */



.about {
  top:3.65rem;
  position: relative;
  display: block;
}

/*    NEU !!!    DETAILS  */
.info-question  {
  display: grid;
  grid-template-columns: [first] 50vw [line2] 50vw  ;
  grid-template-rows: 40rem 40rem 40rem;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  list-style: none;
  margin-bottom: 100px;
  padding: 15rem 6px 6px 6px;
  animation: colorchange 300s infinite;
  top: 5rem;

}

.info-question .question {
  display: inline-grid;
  list-style: none;
  animation: textcolorchange 300s infinite;
  background-color: #ececec;
  overflow-x:hidden;
  overflow-y: auto;
  padding-left: 0;

}
.info-question details {
  display: inline-grid;
  position: relative;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] {
  background-color: #212121;
  color: white;
}
.info-question h1 {
  font-size: 3.4rem;
  line-height: 1.25;
  letter-spacing: -1px;
  padding-bottom: 3rem;
  padding-left: 40px;
  padding-right: 80px;
  padding-top: 1rem;
}
.info-question summary h1 {
  text-decoration: underline;
  text-underline-position: auto;
  text-decoration-thickness: 0.25rem !important;
  text-decoration-skip-ink: auto;
  text-decoration-skip: none;
  letter-spacing: 0.25rem;
  word-spacing: 0.25rem;
  max-width: 42vw;
  line-height: 1.25;
  cursor: pointer;

}

.info-question p {
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  padding-right: 40px;
  padding-left: 40px;
  font-family: "Helvetica", sans-serif;
  display: inline;
  margin-bottom: 4rem;
  max-width: 42vw;
}

.info-question h2 {
  padding-left: 12rem;
}


.info-question h3 {
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -1px;
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 3;
}

.info-question ol {
  margin-top: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
  line-height: 2;
}
.info-question ul, .info-question table {
  margin-bottom: 4rem;
  display: inline-grid;
  grid-column-start: 2;
  grid-column-end: 4;
}

.info-question table {
  padding-right: 6vw;
}
.info-question table td:first-child {
  width: 150px;
  padding-left: 40px;
}

.info-question ol li, .info-question ul li{
  text-align: left;
  width: 100%;
  padding-left: 8vw;
}
.info-question .link-button{
    padding: .4em .8em;
    /* border: 6px solid white;
    border-radius: .4em; */
    color: white;
    width: 50%;
    height: 4rem;
    text-align: center;
    vertical-align: middle;
    margin-top: 20%;
    margin-left: 20%;

    font-size: 3.4rem;
    line-height: 1.25;
    letter-spacing: -1px;

}
.info-question .link-button h1{
  display: inline;
  vertical-align: middle;
}

/*    ENDE: NEU !!!     */






  /*   NEU!!!  */

.footer-close-btn {
  position: fixed;
  right: 80px;
  top: 40px;
  width: 50px;
  height: 50px;
  opacity: 1;
  float: right;
  margin-left: 40px;
  margin-bottom: 40px;
}
.footer-close-btn:before, .footer-close-btn:after {
  position: absolute;
  left: 25px;
  content: ' ';
  height: 50px;
  width: 3px;
  background-color: white;
}
.footer-close-btn:before {
  transform: rotate(45deg);
}
.footer-close-btn:after {
  transform: rotate(-45deg);
}

/*   ENDE: NEU!!! */





/* demokratiefeste */
.demokratiefeste {
  position: relative;
  display: block;
  width:100vw;
  min-height: 100vh;
}
.feste-iframe {
  width: 100%;
  height: 50vh;
  border-top: 6px solid;
  border-bottom: 6px solid;
  animation: bordertopchange 300s infinite;
}

.slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  margin-left: -40px;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
.slide.active {
  display: block;
}

/*    NEU !!!    SLIDER PLAKATE  */
.slider-plakate {
  position: relative;
  display: inline-grid;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  left: 0;
  top: 0;
  overflow: hidden;
}
.slide-plakat {
  position: absolute;
  top: 0;
  left: 0;
  width: 28rem;
  height: 40rem;
  display: none;
  margin-left: 40px;
}
.slide-plakat img {
  position: absolute;
  width: 100%;
  height: 40rem;
  object-fit: cover;
}
.slide-plakat.active {
  display: block;
}


/*    NEU !!!    QUESTION PLAKATE  */

.info-question .question-hg {
  display: inline-grid;
  list-style: none;
  animation: textcolorchange 300s infinite;
  object-fit: cover;
  overflow-x:hidden;
  overflow-y: auto;
  padding-left: 0;
  position: relative;
}

.hg-1 {
  background-image: url("plakate.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}
.hg-2 {
  background-image: url("medienberichte.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;}
.hg-3 {
  background-image: url("demokratiefeste.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;}
.hg-4 {
  background-image: url("schoenerwaehlen.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;}
.hg-5 {
  background-image: url("kulturschaffende.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;}
.hg-6 {
  background-image: url("veranstaltungen.webp");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}

.info-question .question-hg details {
  display: inline-grid;
  position: absolute;
  z-index: 999999999999999999999999999999999999;
}

.question-plakate {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  height: auto;
  left: 0;
  overflow: hidden;
  display: block;
  margin-left: 0;
  object-fit: cover;
}

.question-plakate img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.question-plakat {
  position: absolute;
  top: 130px;
  left: -40px;
  width: 115%;
  height: auto;
  display: none;
  object-fit: cover;
}
.question-plakat img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.question-plakat.active {
  display: block;
}







.closebutton {
  padding-left: 20px;
  padding-top: 0.1rem;
  padding-right: 0.5vw;
  position: fixed;
  right: 0;
  float: right;
  top: 5rem;
  z-index: 9999999999999999999999999;
  width: auto;
  height: 3.5rem;
  color: #ececec;
}


.poster-box figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #111;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}


.poster-box .more-details a {
  padding-bottom: 0;
  display: inline-block;
  height: auto;
  color: grey;
}

.stoerer-section{
  position: fixed;
  display: block;
  width: 22vw;
  right: 5rem;
  align-items: center;
  object-position: center;
  z-index: 10;
}
.stoerer-section img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
}


/*   ------- Filtermenu -------   */
.filter-menu {
  display: none;
  width: 100vw;
  height: 25vh;
  background-color: grey;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 1000;
  border-top: 2px #111 solid;
}
.filter-menu a{
}
.info-menu {
  display: none;
  width: 100vw;
  min-height: 100vh;
  background-color: #a4a4a4;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 2000;
  overflow-y: scroll;
  z-index: 9999999;
  color: black;
}

/* Stil für die ankerverlinkten Elemente im Menü */
.burger-menu .menu-link {
  display: none;
}
/* Stil für das Burgermenü */
.burger-icon {
  display: none; /* Versteckt das Menü standardmäßig */
  z-index:10;
}

.menu-item {
  display: none; /* Versteckt das Menü standardmäßig */
}
.footer .menu-item {
  display: inline-block;
  color: #ececec;
  top: 0.25rem;
  position: relative;
  width: 100%;
  padding-bottom: 0.25rem;
}




            /* -------------------------  MOBIL: Tablet  ---------------------*/
            @media screen and (min-width: 1750px) {

              .info-box h3 {
                display: inline-grid;
                grid-column-start: 1;
                grid-column-end: 2;
              }
              .info-box h2 {
                padding-left: 30rem;
              }

            /* Stil für das Burger-Icon */
            .footer .burger-icon {
              display: inline-block !important;
              font-size: 3.4rem;
              font-weight: 100;
              color: #ececec;
              float: right;
              margin-right: 6rem;
            }
            }


            /* -------------------------  MOBIL: Tablet  ---------------------*/
            @media screen and (min-width: 1300px) {



              /* Stil für das Burger-Icon */
              .footer .burger-icon {
                display: inline-block !important;
                font-size: 3.4rem;
                font-weight: 100;
                color: #ececec;
                float: right;
                margin-right: 6rem;
              }
            }



            @media screen and (max-width: 1300px) {

              .menu-item {
                display: block; /* Versteckt das Menü standardmäßig */
              }
              /*    NEU !!!    DETAILS  */
              .info-quote  {
                display: grid;
                grid-template-columns: [first] 30% [line2] 70%  ;
                grid-template-rows: auto auto auto;
                grid-column-gap: 6px;
                grid-row-gap: 6px;
                list-style: none;
                margin-bottom: 40px;
                top:8rem;
                padding: 6px 6px 6px 6px;
                position: relative;
              }
              .info-quote .quote {
                display: inline-grid;
                grid-column-start: 2;
                grid-column-end: 4;
                padding-right: 25vw;

                list-style: none;
                animation: textcolorchange 300s infinite;
                background-color: #ececec;
                overflow-x: hidden;
                overflow-y: auto;
                padding-left: 0;
              }
              .info-quote h1 {
                font-size: 3.4rem;
                line-height: 1;
                letter-spacing: -1px;
                padding-bottom: 3rem;
                padding-left: 40px;
                padding-right: 80px;
                padding-top: 1rem;
              }
              .long {
                grid-column-start: 2;
                grid-column-end: 4;
                grid-row-start: 3;
                grid-row-end: 4;
                padding-right: 25vw;
              }

              /*    ENDE: NEU !!!     */




              p a {
                text-decoration-thickness: 0.25rem !important;
              }


              .info-box {
                padding-top: 10rem;
              }


              .header {
              }

              .header .header-link {
                padding-left: 10px;
                padding-right: 0px;
                display: none;
              }

              .header .header-link:first-child {
                display: inline-block;
                width: auto;
                overflow: visible;
                padding-left: 0px;
              }


              .header h1 {
                  color: #ececec;
                  font-size: 3.4rem;
                  line-height: 1;
                  letter-spacing: -1px;
                  padding-left: 40px;
              }

              /* Stil für das Burgermenü */
              .burger-menu {
                display: none; /* Versteckt das Menü standardmäßig */
              }
              /* Stil für das Burger-Icon */
              .burger-icon {
                display: inline-block !important;
                font-size: 3.4rem;
                font-weight: 100;
                color: #ffffff;
                float: right;
                margin-right: 6rem;
              }
              /* Stil für die ankerverlinkten Elemente im Menü */
              .menu-link {
                display: inline-block !important;

                color: #ffffff;
                padding-left: 10px;
              }

              .footer button{
                padding-left: 10px;
              }
              #footer-details .info-box, #join-details .info-box {
                padding-top: 11rem;
              }



            }


            @media screen and (max-width: 1250px) {


              /*    NEU !!!    DETAILS  */
              .info-quote  {
                display: grid;
                grid-template-columns: [first] 50% [line2] 50%  ;
                grid-template-rows: auto auto auto;
                grid-column-gap: 6px;
                grid-row-gap: 6px;
                list-style: none;
                margin-bottom: 40px;
                top:8rem;
                padding: 6px 6px 6px 6px;
                position: relative;
              }
              .info-quote .quote {
                display: inline-grid;
                grid-column-start: 2;
                grid-column-end: 4;
                padding-right: 0;

                list-style: none;
                animation: textcolorchange 300s infinite;
                background-color: #ececec;
                overflow-x: hidden;
                overflow-y: auto;
                padding-left: 0;
              }
              .info-quote h1 {
                font-size: 3.4rem;
                line-height: 1;
                letter-spacing: -1px;
                padding-bottom: 3rem;
                padding-left: 40px;
                padding-right: 80px;
                padding-top: 1rem;
              }
              .long {
                grid-column-start: 2;
                grid-column-end: 4;
                grid-row-start: 3;
                grid-row-end: 4;
                padding-right: 25vw;
              }


              /*    NEU !!!    SLIDER PLAKATE  */


              .info-box {
                display: grid;
                grid-template-columns: [first] 100vw;
                grid-template-rows: auto 1fr;
                grid-column-gap: 0px;
                list-style: none;
                width: 100vw;
                /*min-height: 70vh;*/
                padding-top: 8rem;
                padding-left: 5px;
                padding-right: 1vw;
                animation: textcolorchange 300s infinite;
                margin-bottom: 100px;
              }


              .slider-plakate {
                position: relative;
                display: inline-grid;
                grid-column-start: 1;
                grid-column-end: 1;
                grid-row-start: 1;
                grid-row-end: 4;
                left: 0;
                top: 0;
                overflow: hidden;
              }
              .slide-plakat {
                position: absolute;
                top: 0;
                left: 0;
                width: 28rem;
                height: 40rem;
                display: none;
                margin-left: 40px;
              }
              .slide-plakat img {
                position: absolute;
                width: 100%;
                height: 40rem;
                object-fit: cover;
              }
              .slide-plakat.active {
                display: block;
              }

              /*    ENDE: NEU !!!     */


              .scroller{
              }
              .info-box {
                display: block;
                list-style: none;
                width: 100vw;
                height: auto;
                padding-top: 10rem;
                padding-left: 0px;
                padding-right: 40px;
                padding-bottom: 5vh;
                margin-bottom: 0;
              }

              .info-box p {
                display: block;
                width: 60vw;
                margin-bottom: 4rem;
                padding-left: 40px;
              }
              .info-box table td:first-child {
                width: 15vw;
              }
              .info-box table {
                padding-left: 40px;
              }


              .info-box h1, .info-box h3 {
                display: block;
                padding-bottom: 3rem;
                width: 70vw;
                font-size: 3.4rem;
              }
              .info-box h2 {
                padding-left: 15vw;
                padding-bottom: 2rem;
              }



              .header .header-link {
                width: 100%;
                padding-left: 40px;
                padding-right: 0px;
              }

              .header .header-link:first-child {
                width: auto;
              }

              .header h1 {
                  color: #ececec;
                  font-size: 3.4rem;
                  line-height: 1;
                  letter-spacing: -1px;
                  padding-left: 15px;
              }


              .project-info {
                position: absolute;
                width: 32vw;
                height: 47vw;
                color: #ececec;
                animation: colorchange 300s infinite;
                opacity: 0;
                overflow-y: scroll;
                overflow-x: hidden;
              }
              .project-info p, .project-info button {
                margin-left: 10px;
              }
              label {
                padding-right: 1vw;
                padding-left: 60px;
                font-family: "Helvetica", sans-serif;
                display: inline-block;
                margin-bottom: 1.5rem;
              }
              .checkbox-container {
                  margin-top: 2rem;
                  display: inline-block;
                  position: relative;
              }
              .checkbox-container input {
                position: absolute;
                opacity: 0;
              }
              .checkmark {
                position: absolute;
                top: 0;
                left: 10px;
                height: 40px;
                width: 40px;
                border: 2px solid #ececec;
              }
              .checkbox-container input:checked ~ .checkmark {
                border: 3px solid #ececec;
              }
              .checkbox-container .checkmark:after {
                left: 13px;
                top: 2px;
                width: 12px;
                height: 25px;
                border: solid white;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
              }
              .close-btn{
                float: left;
                display: inline-block;
              }


              /*    NEU !!!    DETAILS  */
              .info-question  {
                display: grid;
                grid-template-columns: [first] 50vw [line2] 50vw  ;
                grid-template-rows: 40rem 40rem 40rem;
                grid-column-gap: 6px;
                grid-row-gap: 6px;
                list-style: none;
                margin-bottom: 100px;
                padding: 15rem 6px 6px 6px;
                animation: colorchange 300s infinite;
                top: 5rem;

              }
              .info-question .question {
                display: inline-grid;
                list-style: none;
                animation: textcolorchange 300s infinite;
                background-color: #ececec;
                overflow-x:hidden;
                overflow-y: auto;
                padding-left: 0;
              }
              .info-question details {
                display: inline-grid;
                position: relative;
              }
              details > summary {
                list-style: none;
              }
              details > summary::-webkit-details-marker {
                display: none;
              }
              details[open] {
                background-color: #212121;
                color: white;
              }
              .info-question h1 {
                font-size: 3.4rem;
                line-height: 1;
                letter-spacing: -1px;
                padding-bottom: 3rem;
                padding-left: 15px;
                padding-right: 5px;
                padding-top: 1rem;
              }
              .info-question p {
                display: inline-grid;
                grid-column-start: 2;
                grid-column-end: 4;
                padding-right: 15px;
                padding-left: 15px;
                font-family: "Helvetica", sans-serif;
                display: inline;
                margin-bottom: 4rem;
                max-width: 700px;
              }

              .info-question h2 {
                padding-left: 12rem;
              }

              .info-question h3 {
                font-size: 3.4rem;
                line-height: 1;
                letter-spacing: -1px;
                display: inline-grid;
                grid-column-start: 1;
                grid-column-end: 3;
              }

              .info-question ol {
                margin-top: 4rem;
                display: inline-grid;
                grid-column-start: 2;
                grid-column-end: 4;
                line-height: 2;
              }
              .info-question ul, .info-question table {
                margin-bottom: 4rem;
                display: inline-grid;
                grid-column-start: 2;
                grid-column-end: 4;
              }

              .info-question table {
                padding-right: 6vw;
              }
              .info-question table td:first-child {
                width: 150px;
                padding-left: 15px;
              }

              .info-question ol li, .info-question ul li{
                text-align: left;
                width: 100%;
                padding-left: 8vw;
              }
              .info-question .link-button{
                  padding: .4em .8em;
                  /* border: 6px solid white;
                  border-radius: .4em; */
                  color: white;
                  width: 50%;
                  height: 4rem;
                  text-align: center;
                  vertical-align: middle;
                  margin-top: 20%;
                  margin-left: 20%;

                  font-size: 3.4rem;
                  line-height: 1.25;
                  letter-spacing: -1px;

              }
              .info-question .link-button h1{
                display: inline;
                vertical-align: middle;
              }

              /*    ENDE: NEU !!!     */

            }







            /* -------------------------  MOBIL: Tablet klein  ---------------------*/

            @media screen and (max-width: 900px) {
              body{
                font-size: 2rem;
                letter-spacing:  normal;
              }

              .stoerer-section{
                position: fixed;
                display: block;
                width: 30vw;
                right: 1rem;
                align-items: center;
                object-position: center;
                z-index: 10;
                top: 11.5rem;
              }


              .info-box {
                display: block;
                list-style: none;
                width: 100vw;
                height: auto;
                padding-top: 20.5rem;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 5vh;
              }

              .info-box ol {
                margin-top: 4rem;
                display: inline-grid;
                grid-column-start: 1;
                grid-column-end: 4;
                line-height: 2;
              }
              .info-box ol li{
                text-align: left;
                width: 100%;
                padding-left: 5vw;
              }
              .info-box ul li{
                padding-bottom: 0;
              }
              #footer-details .info-box li {
                padding-left: 0;
              }
              .info-box p {
                display: block;
                width: 90vw;
                margin-bottom: 2rem;
                padding-left: 0;
              }
              .info-box h1, .info-box h3 {
                display: block;
                padding-bottom: 3rem;
                width: 90vw;
                font-size: 3.25rem;
                padding-left: 0;
              }
              .info-box h2 {
                width: 65vw;
                padding-left: 0;
                padding-bottom: 1rem;
                width: 80vw;
                font-weight: 600;
              }
              .info-box ul, .info-box table{
                margin-bottom: 1.5rem;
              }

              .info-box table {
                padding-left: 0;
              }
              .info-box table td:first-child {
                width: 20vw;
              }
              .info-box table td:last-child {
                width: auto;
                overflow: hidden;
              }




            /*    NEU !!!    DETAILS  */
            .info-question  {
              display: grid;
              grid-template-columns: 96vw ;
              grid-template-rows: 30rem 30rem 30rem 30rem 30rem 30rem;
              grid-column-gap: 6px;
              grid-row-gap: 6px;
              list-style: none;
              margin-bottom: 100px;
              padding: 12rem 6px 6px 6px;
              animation: colorchange 300s infinite;
              top: 5rem;

            }
            .info-question .question {
              display: inline-grid;
              list-style: none;
              animation: textcolorchange 300s infinite;
              background-color: #ececec;
              overflow-x:hidden;
              overflow-y: auto;
              padding-left: 0;
            }
            .info-question details {
              display: inline-grid;
              position: relative;
            }
            .info-question summary h1{
              max-width: none;
            }
            details > summary {
              list-style: none;
            }
            details > summary::-webkit-details-marker {
              display: none;
            }
            details[open] {
              background-color: #212121;
              color: white;
            }
            .info-question h1 {
              font-size: 3.25rem;
              line-height: 1.25;
              letter-spacing: 0px;
              padding-bottom: 3rem;
              padding-left: 15px;
              padding-right: 5px;
              padding-top: 1rem;
            }
            .info-question p {
              display: inline-grid;
              grid-column-start: 2;
              grid-column-end: 4;
              padding-right: 15px;
              padding-left: 15px;
              font-family: "Helvetica", sans-serif;
              display: inline;
              margin-bottom: 4rem;
              max-width: 700px;
            }

            .info-question h2 {
              padding-left: 12rem;
            }

            .info-question h3 {
              font-size: 3.5rem;
              line-height: 1;
              letter-spacing: 0px;
              display: inline-grid;
              grid-column-start: 1;
              grid-column-end: 3;
            }

            .info-question ol {
              margin-top: 4rem;
              display: inline-grid;
              grid-column-start: 2;
              grid-column-end: 4;
              line-height: 2;
            }
            .info-question ul, .info-question table {
              margin-bottom: 4rem;
              display: inline-grid;
              grid-column-start: 2;
              grid-column-end: 4;
            }

            .info-question table {
              padding-right: 6vw;
            }
            .info-question table td:first-child {
              width: 150px;
              padding-left: 15px;
            }

            .info-question ol li, .info-question ul li{
              text-align: left;
              width: 100%;
              padding-left: 8vw;
            }
            .info-question .link-button{
                padding: .4em .8em;
                /* border: 6px solid white;
                border-radius: .4em; */
                color: white;
                width: 50%;
                height: 4rem;
                text-align: center;
                vertical-align: middle;
                margin-top: 20%;
                margin-left: 20%;

                font-size: 3.25rem;
                line-height: 1.25;
                letter-spacing: 0px;

            }
            .info-question .link-button h1{
              display: inline;
              vertical-align: middle;
            }

            /*    ENDE: NEU !!!     */





              .header .header-link {
                padding-left: 10px;
                padding-right: 10px;
                display: none;
              }

              .header .header-link:first-child {
                display: inline-block;
                width: auto;
                overflow: visible;
              }
              .header h1 {
                  color: #ececec;
                  font-size: 3.25rem;
                  line-height: 1;
                  letter-spacing: px;

              }

              /* Stil für das Burgermenü */
              .burger-menu {
                display: none; /* Versteckt das Menü standardmäßig */
              }
              /* Stil für das Burger-Icon */
              .burger-icon {
                display: inline-block !important;
                font-size: 3.25rem;
                font-weight: 100;
                color: #ffffff;
                float: right;
                margin-right: 10px;
              }
              /* Stil für die ankerverlinkten Elemente im Menü */
              .menu-item {
              }
              /* Stil für die ankerverlinkten Elemente im Menü */
              .menu-link {
                color: #ffffff;
                padding-left: 10px;
              }


              .footer button{
                padding-left: 0;
              }
              #footer-details .info-box{
                padding-top: 11rem;
              }








                            /*    NEU !!!    DETAILS  */
                            .info-quote  {
                              display: grid;
                              grid-template-columns: [first] 100% ;
                              grid-template-rows: auto auto auto;
                              grid-column-gap: 6px;
                              grid-row-gap: 6px;
                              list-style: none;
                              margin-bottom: 40px;
                              top:8rem;
                              padding: 6px 6px 6px 6px;
                              position: relative;
                            }
                            .info-quote .quote {
                              display: inline-grid;
                              grid-column-start: 2;
                              grid-column-end: 4;
                              padding-right: 0;

                              list-style: none;
                              animation: textcolorchange 300s infinite;
                              background-color: #ececec;
                              overflow-x: hidden;
                              overflow-y: auto;
                              padding-left: 0;
                            }
                            .info-quote h1 {
                              font-size: 3.4rem;
                              line-height: 1;
                              letter-spacing: 0px;
                              padding-bottom: 3rem;
                              padding-left: 40px;
                              padding-right: 80px;
                              padding-top: 1rem;
                            }
                            .long {
                              grid-column-start: 2;
                              grid-column-end: 4;
                              grid-row-start: 3;
                              grid-row-end: 4;
                              padding-right: 25vw;
                            }


                            .slider-plakate {
                              position: relative;
                              display: inline-grid;
                              grid-column-start: 1;
                              grid-column-end: 1;
                              grid-row-start: 1;
                              grid-row-end: 5;
                              left: 0;
                              top: 0;
                              overflow: hidden;
                            }
                            .slide-plakat {
                              position: absolute;
                              top: 0;
                              left: 0;
                              width: 28rem;
                              height: 40rem;
                              display: none;
                              margin-left: 40px;
                            }
                            .slide-plakat img {
                              position: absolute;
                              width: 100%;
                              height: 40rem;
                              object-fit: cover;
                            }
                            .slide-plakat.active {
                              display: block;
                            }
                            .footer h1{
                              font-size: 3.25rem;
                            }
                            .header, .footer {
                              height: 4rem;
                            }

            }


            /* -------------------------  MOBIL: Smartphone  ---------------------*/

            @media screen and (max-width: 900px) {

              body{
                font-size: 1.75rem;
              }

                          /*    NEU !!!    DETAILS  */
                          .info-quote  {
                            display: grid;
                            grid-template-columns: 100 ;
                            grid-template-rows: auto auto auto auto auto auto;
                            grid-column-gap: 6px;
                            grid-row-gap: 6px;
                            list-style: none;
                            margin-bottom: 40px;
                            top:8rem;
                            padding: 6px 6px 6px 6px;
                            position: relative;
                          }
                          .info-quote .quote {
                            display: inline-grid;
                            grid-column-start: 1;
                            grid-column-end: 4;
                            padding-right: 0;

                            list-style: none;
                            animation: textcolorchange 300s infinite;
                            background-color: #ececec;
                            overflow-x: hidden;
                            overflow-y: auto;
                            padding-left: 0;
                          }
                          .info-quote h1 {
                            font-size: 3.25rem;
                            line-height: 1;
                            letter-spacing: 0px;
                            padding-bottom: 3rem;
                            padding-left: 5px;
                            padding-right: 80px;
                            padding-top: 1rem;
                          }
                          .long {
                            grid-column-start: 2;
                            grid-column-end: 4;
                            grid-row-start: 3;
                            grid-row-end: 4;
                            padding-right: 25vw;
                          }


                          .slider-plakate {
                            position: relative;
                            display: inline-grid;
                            grid-column-start: 1;
                            grid-column-end: 1;
                            grid-row-start: 1;
                            grid-row-end: 5;
                            left: 0;
                            top: 0;
                            overflow: hidden;
                            display:none;
                          }
                          .slide-plakat {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 28rem;
                            height: 40rem;
                            display: none;
                            margin-left: 40px;
                          }
                          .slide-plakat img {
                            position: absolute;
                            width: 100%;
                            height: 40rem;
                            object-fit: cover;
                          }
                          .slide-plakat.active {
                            display: block;
                          }
                        }

            /* -------------------------  MOBIL: Smartphone  ---------------------*/

            @media screen and (max-width: 450px) {
              body{
                font-size: 1.5rem;
                letter-spacing:  normal;
              }

              a {
                text-decoration-thickness: 0.75rem !important;
              }
              p a, li a, table a {
                text-decoration-thickness: 0.1rem !important;
                text-underline-position:  normal;
                text-decoration-skip-ink: none;
                letter-spacing: 0.15rem;
              }

              #info, #feste, #urnen {
                height: auto;
                overflow-y: ;
                min-height: 50vh;
                overflow-x: hidden;
              }

              .img-preview img {
                width: 100%;
              }
              .project-info {
                height: 143vw;
              }


              .close-btn{
                float: left;
                display: inline-block;
              }



              .info-box {
                display: block;
                list-style: none;
                width: 100vw;
                height: auto;
                padding-top: 0;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 7rem;


                  padding-top: 7rem;
                  position: relative;
              }

              .info-box:first-child, .big {
              }
              .info-box p {
                display: block;
                width: 90vw;
                margin-bottom: 2rem;
                padding-left: 0;
              }



              .info-box h1, .info-box h3 {
                display: block;
                padding-bottom: 3rem;
                width: 90vw;
                font-size: 3.25rem;
                padding-left:0;
              }
              .info-box h2 {
                padding-left: 0;
                padding-bottom: 1rem;
                width: 90vw;
              }
              .info-box ul, .info-box table{
                margin-bottom: 1.5rem;
              }
              .info-box table td:first-child {
                display: none;
              }
              .info-box table td:last-child {
                width: auto;
                overflow: hidden;
              }


                .header, .header:hover {
                  height: 4.5rem;
                }

                .header .header-link {
                  padding-left: 10px;
                  padding-right: 10px;
                  display: none;
                }

                .header .header-link:first-child {
                  display:inline-block;
                }
                .header h1 {
                    color: #ececec;
                    font-size: 3.25rem;
                    line-height: 1;
                    letter-spacing: 0px;
                    margin-top:0.35rem;
                }


                .slider{
                  margin-left: -10px;
                }


                .fhg-lesbar{
                  height: 8.5rem;
                }


                .info-question h1, .footer h1, .ticker_item h1 {
                  font-size: 3.25rem;
                }
                .footer h1{
                  padding-bottom: 0.5rem;
                }
                .footer button a {
                  text-decoration-thickness: 0.175rem !important;
                  margin-top:1rem;
                }

                .info-question .link-button{
                    padding: .4em .8em;
                    /* border: 6px solid white;
                    border-radius: .4em; */
                    width: 50%;
                    height: 4rem;
                    text-align: center;
                    vertical-align: middle;
                    margin-top: 15%;
                    margin-left: 15%;

                    font-size: 3.25rem;
                    line-height: 1.25;
                    letter-spacing: 0px;

                }
                .info-question .link-button h1{
                  display: inline;
                  vertical-align: middle;
                }




            }


            /* -------------------------  MOBIL: Smartphone  ---------------------*/

            @media screen and (max-width: 400px) {
              a {
                text-decoration-thickness: 0.6rem !important;
              }
              .info-box h1, .info-box h3, .header h1, .info-question h1, .footer h1, .ticker_item h1 {
                font-size: 2.75rem;
              }
            }








table, th, td {
  border: none;
  vertical-align:top;
}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
input[name="select"] {
  display: none;
}

.hide {
  display: none !important;
}



  @keyframes textcolorchange {
    0%   {color: #0039ac;} /*blau*/

    20%  {color: #ea4e2f;} /*rot*/
    40%  {color: #6f284b;} /*beere*/
    60%  {color: #988500;} /*grüngelb*/
    70%  {color: #285c6f;} /*schlammgrün*/
    80%  {color: #144e16;} /*dunkelgrün*/

    100% {color: #0039ac;} /*blau*/
  }

  @keyframes colorchange {
    0%   {background-color: #2f6e40;} /*dunkelgrün*/

    20%  {background-color: #6f284b;} /*beere*/
    40%  {background-color: #465025;} /*petrol*/
    50%  {background-color: #0039ac;} /*blau*/
    70%  {background-color: #ea4e2f;} /*rot*/
    80%  {background-color: #6d302e;} /*dunkelrot*/

    100% {background-color: #2f6e40;} /*dunkelgrün*/
  }
  @keyframes colorchange2 {
    0%   {background-color: #465025;} /*dunkelgrün*/

    10%  {background-color: #0039ac;} /*beere*/
    30%  {background-color: #ea4e2f;} /*petrol*/
    40%  {background-color: #6d302e;} /*blau*/
    60%  {background-color: #2f6e40;} /*rot*/
    80%  {background-color: #6f284b;} /*dunkelrot*/

    100% {background-color: #465025;} /*dunkelgrün*/
  }

  @keyframes bordertopchange {
    0%   {border-top: 6px solid #0039ac;
          border-bottom: 6px solid #0039ac;} /**/

    20%  {border-top: 6px solid #ea4e2f;
          border-bottom: 6px solid #ea4e2f;} /**/
    40%  {border-top: 6px solid #6f284b;
          border-bottom: 6px solid #6f284b;} /**/
    60%  {border-top: 6px solid #988500;
          border-bottom: 6px solid #988500;} /**/
    70%  {border-top: 6px solid #465025;
          border-bottom: 6px solid #465025;} /**/
    80%  {border-top: 6px solid #144e16;
          border-bottom: 6px solid #144e16;} /**/

    100% {border-top: 6px solid #0039ac;
          border-bottom: 6px solid #0039ac;} /**/
  }

  @keyframes borderchange {
    0%   {border: 2px solid #6f284b;} /**/

    20%  {border: 2px solid #0039ac;} /**/
    40%  {border: 2px solid #988500;} /**/
    60%  {border: 2px solid #ea4e2f;} /**/
    70%  {border: 2px solid #465025;} /**/
    80%  {border: 2px solid #144e16;} /**/

    100% {border: 2px solid #6f284b;} /**/
  }

  @keyframes scrollbarcolor {
    0%   {background: #35ac4a;} /* */
    20%  {background: #988500;} /* */
    40%  {background: #0039ac;} /* */
    60%  {background: #144e16;} /* */
    80%  {background: #ea4e2f;} /* */
    100% {background: #35ac4a;} /* */
  }

  {
    0%   {color: #35ac4a;} /*grün*/
    15%  {color: #0039ac;} /*blau*/
    35%  {color: #988500;} /*grüngelb*/
    60%  {color: #51b056;} /*rot*/
    80%  {color: #144e16;} /*schwarz*/
    100% {color: #35ac4a;} /*grün*/
  }

  a,a:link,a:visited{
    outline:none;
  }