:root {
  --black: black;
  --white: white;
  --grey: lightgrey;
  --lila: #7b68e5;
  --lilah: #a9a0cf;
  --lilad: #461dd0;
  --postgrey: #fafafa;
  --orange:  #ff5722;
  --readingfont: 20px;
  --headerdate: 22px;
  --filterlabel: 14px;
}

* {
  box-sizing: border-box;  
  scrollbar-width: thin;
  scrollbar-color: var(--lilad) var(--lilah);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--lilad);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--lilah);
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--white);
  margin: 0px;
  padding: 0px;
}

img, video
 {
  max-width: 100%;
  display: inline-block;
}

a {
  text-decoration: none;
  color: var(--lilad);
}

a:visited {
  text-decoration: none;
  color: var(--lilah)
    }

/* header & header_menu */
.header {
  display:inline-flex;
  flex-direction: row wrap;
  top: 0;
  z-index: 2;
  background-color: var(--white);
  position: fixed;
  width: 100%;
  justify-content: space-between;
  box-shadow: 5px 0px 7px var(--lilah)
  }

  .header_logo {
    margin-top: 0.5%;
    margin-left: 1%;
    margin-bottom: 0%;
    width: 150px;
    min-width: 150px;
  }

.header_menu {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: right;
    overflow: hidden;
    font-size: 28px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    padding-right: 1.5vw;
  }
  
  .header_menu a {
    float: right;
    color: var(--black);
    text-align: center;
    text-decoration: none;
    padding-left: 1.1vw;
    padding-right: 1.1vw;
  }
  
  .header_menu a:hover {
    color: var(--lilad);
    font-weight: 600;
    font-style: normal;
  }
  
  .header_menu a.active {
    color: var(--lila);
    font-weight: 600;
    font-style: normal;
  }

  /* footer & footer menu */
  .footer {
    /*position:relative;  /* ganz am Ende der Seite */
    position: fixed; /* immer am unteren Seitenrand */
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--white);
    text-align: center;
  }

  .footer_menu {
    display: inline-flex;
    flex-flow: row wrap;
    overflow: hidden;
    margin-top: 10px;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    gap: 2.5vw;
  }

  .footer_menu a {
    color: var(--lilad);
  }

  .footer_menu a:hover {
    color: var(--orange);
  }

  .footer_menu a:visited {
    color: var(--lilad);
  }

  /* Copyright Anmerkung */
  .copyright {
    font-size: 13px;
    font-weight:normal;
  }


  /* about page */
  .about_main {
    display: flex;
    flex-flow: column wrap;
    margin-top: 3%;
  }
  
  .about {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content:space-evenly;
    min-height: 800px;
    background: var(--white);
    margin-top: 5rem;
    margin-bottom: 10rem;
  }

  .about_pic {
    min-width: 30%;
    height: auto;
   }

   .about_text {
    display: inline-flex;
    flex-flow: column wrap;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: var(--readingfont);
    font-weight: normal;
    padding-top:20px;
    padding-bottom: 20px;
    overflow: hidden;
    width: 40%;
  }

  /* Arbeitsgruppen */
    .ag_main {
    display: flex;
    flex-flow: column wrap;
    margin-top: 11%;
    margin-left: 20%;
    margin-right: 20%;
    min-height: 940px;
    overflow: hidden;
  }
  
  .arbeitsgruppen {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;
    min-height: fit-content;
    gap: 1.5vw;
    background: var(--white);
    overflow: hidden;
  }

  .ag_pic {
    width: 120px;
    height: auto;
    padding-top: 1%;
    padding-bottom: 1%;
  }
  
  .ag_text {
    display: inline-flex;
    flex-flow: column wrap;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: var(--readingfont);
    font-weight: normal;
    overflow: hidden;
    width: 70%;
    padding-top: 2%;
    padding-bottom: 2%;
  }

  /* FAQ ------------------- */
  .faq_main {
    display: flex;
    flex-flow: column wrap;
    margin-top: 13rem;
    align-content: center;
    width: 100%;
    min-height: 800px;
    overflow: hidden;
  }

  .faq_frage {
      color: var(--black);
      font-family: 'Poppins', sans-serif;
      color: var(--lila);
      font-size: var(--headerdate);
      font-weight: 600;
      overflow: hidden;
  }

  .faq_text {
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: var(--readingfont);
    font-weight: normal;
    overflow: hidden;
  }

  details {
    max-width: 100%;
    overflow: hidden; /* Keep this line to prevent an odd blue outline around the element in Safari. */
  }

  summary {
    display: block;
  }

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

  span {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    height: 4rem;
  }

  span:hover {
    cursor: pointer;
  }

  span::before {
    content: "►";
    font-size: 1rem;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    transition: rotate 200ms 400ms ease-out;
  }

  div.content {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    border: 2px solid transparent;
    transition: max-height 400ms ease-out, border 0ms 400ms linear;
  }

  details[open] + div.content {
    max-height: 800px; /* Set a max-height value enough to show all the content */
    
    transition: max-height 400ms ease-out, border 0ms linear;
  }

  details[open] span::before {
    rotate: 90deg;
    transition: rotate 200ms ease-out;
  }

  /* Neuigkeiten und Links ------------------ */
  .news_main {
    display: inline-flex;
    flex-flow: column wrap;
    margin-top: 10%;
    margin-bottom: 10%;
    align-items: center;
    width: 100%;
  }

  .news {
    display: inline-flex;
    flex-flow: row wrap;
    min-width: 100%;
    align-content:space-evenly;
    padding: 0;
  }

  /* Bild Scrollcontainer */
  div.scroll-container {
    background-color: var(--white);
    overflow-x:scroll;
    white-space: nowrap;
  }

  div.scroll-container img {
    padding: 0;
  }

  /* news und link styling */
  .news_text {
    width: 100%;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: var(--readingfont);
    font-weight: normal;
    padding-left: 2%;
    padding-right: 2%;
  }

  .link_intro {
    display: inline-flex;
    flex-flow: column wrap;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: var(--readingfont);
    font-weight: normal;
    padding-bottom: 2%;
    padding-left: 1%;
    overflow: hidden;
    width: 65%;
    color: var(--lilad);
  }

  ul.a {
    list-style: disc;
  }

  .news_datum,
  .link_header {
    font-size: var(--headerdate);
    font-weight: 600;
    padding: 2%;
    margin: 0;
  }

  #news_label {
    border-radius: 2rem;
    min-width: 50px;
    max-width: fit-content;
    padding: 0.25rem 0.5rem;
    margin-left: 2%;
    margin-top: 1%;
    background: var(--lila);
    color: var(--white);
    font-size: var(--filterlabel)
  }

   #link_label {
    border-radius: 2rem;
    max-width: fit-content;
    padding: 0.3rem 0.7rem;
    margin-left: 2%;
    margin-top: 1%;
    background: var(--orange);
    color: var(--white);
    font-size: var(--filterlabel);
  }

  /* News Filter */
  ul {
    list-style: none;
  }
  
    input[type="radio"] {
    position: absolute;
    left: -9999px;
  }
  
  /* FILTERS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .filters {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .filters * {
    display: inline-block;
  }
  
  .filters label {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 2rem;
    min-width: 50px;
    line-height: normal;
    cursor: pointer;
    transition: all 0.1s;
    font-size: var(--filterlabel);
  }
  
  .filters label:hover {
    background: var(--lila);
    color: var(--white);
  }

 
  /* FILTERED ELEMENTS (POSTS)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
    .posts {
      display: inline-flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: baseline;
      width: 70%;
    }
  
  .posts .post {
    display: none;
    background: var(--white);
    margin-bottom: 20px;
    min-width: 100%;
  }
  
  /* FILTERING RULES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  *:has([value="Alles"]:checked) .filters [for="Alles"],
  *:has([value="Arbeitsgruppen"]:checked) .filters [for="Arbeitsgruppen"],
  *:has([value="Presse"]:checked) .filters [for="Presse"],
  *:has([value="Aktionen"]:checked) .filters [for="Aktionen"] 
  *:has([value="Aufrufe"]:checked) .filters [for="Aufrufe"] 
  *:has([value="Info"]:checked) .filters [for="Info"]
  *:has([value="Netzwerk"]:checked) .filters [for="Netzwerk"]
  {
    background: var(--lila);
    color: var(--white);
  }
  
  *:has([value="Aktionen"]:checked) .posts [data-category~="Aktionen"],
  *:has([value="Arbeitsgruppen"]:checked) .posts [data-category~="Arbeitsgruppen"],
  *:has([value="Presse"]:checked) .posts [data-category~="Presse"],
  *:has([value="Aufrufe"]:checked) .posts [data-category~="Aufrufe"],
  *:has([value="Info"]:checked) .posts [data-category~="Info"],
  *:has([value="Netzwerk"]:checked) .posts [data-category~="Netzwerk"],
  *:has([value="Alles"]:checked) .posts [data-category] {
    display: block;
  }

  /* responsive design */
  @media (min-width: 10em) and (max-width: 50em) {
    .header_menu {
      font-size: 4.5vw;
    }

    .about_text {
      width: 90%;
    }

    .news_main,
    .ag_main {
      margin-top: 30%;
    }

    .ag_text,
    .about_text,
    .news_text
    .link_intro {
      font-size: 17px;
      width: 95%;
    }

    .filters label
    .filters link_label {
      font-size: 14px;
    }

    .posts {
      width: 90%;
    }
  }

  @media (min-width: 50em) and (max-width: 80em) {
    .news_main {
      margin-top: 15%;
    }

    .about_text,
    .news_text,
    .ag_text
    .link_intro {
      width: 95%;
    }
  }