/*  ==========================================
    Filter-Komponent mit reinem CSS

    Quelle:  
    webdesign.tutsplus.com/
	how-to-build-a-filtering-component-in-
	pure-css--cms-33111t

    Stylesheet für eine rein CSS-basierte 
	Filter-Komponente

    ======================================= */

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.katalog ol {
  list-style: none;
}

h1 a {
  transition: all 0.1s;
}

h1 a:hover {
  background-color: var(--color-black-20);
  color: var(--color-prim2);
}

input[type="radio"] {
  position: absolute;
  left: -9999px;
}


/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
  text-align: left;
  padding: 0; /* KORREKTUR Irgendwo steckt ein überflüssiges Padding-left 40 px */
  margin-bottom: 0.75rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.65rem 0.85rem;
  margin: 0 0.15rem 0.5rem 0;
  border-radius: var(--border-radius-small);
  min-width: 80px;
  text-align: center;
  font-family: "Figtree";
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

.filters label a {
  color: var(--color-prim2);
}

.filters label:hover,
.filters label:focus {
  color: var(--color-black);
  border-color: var(--color-black-40);
  background-color: var(--color-prim3-10);
}

.filters label:active {
  color: var(--color-black);
  border-color: var(--color-black);
}

.filters {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-black-60);
}

.filters-last-option {
  margin-right: 3rem;  
}


/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.posts {
  display: grid;
  grid-gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 0; 
  margin: 0; 
}

.teaser-image {
  background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
  width: 100%;
  height: 8rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  border-radius: 0.75rem 0.75rem 0 0;
}

h4.post-title {
  margin-top: 0.75rem; /* Kein grosser Abstand zwischen Bild und Titel in Kachel */
  margin-bottom: 1rem;
}
.posts .post {
  background: var(--white);
  border-radius: 0.75rem;
  border: 1px solid var(--color-black-20);
}

.posts .post-title {
  vertical-align: top;
}

.posts .post-title:hover {
  text-decoration: none;
}

.posts .post-summary {
  color: var(--gray);
  font-size: 0.9rem;
}

.post-info {
  color: var(--color-black-40);
  font-size: 0.8rem;
  font-weight: 700;
}

.posts figcaption {
  padding: 0 1rem;
}

.posts .post-categories {
  padding: 0; 
  margin: 0; 
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories li {
  margin-right: 0.2rem;
  padding: 0.2rem 0.5rem 0.35rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid var(--color-prim2);
  color: var(--color-prim2);
  line-height: normal;
  transition: all 0.1s;
  background-color: var(--color-white);
}

.xxxposts .post-categories a:hover {
  background: var(--green);
  color: var(--white);
}

.posts #001 {
	background-image: url("../bilder/teaser-test-02.jpg");
}

/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[value="AlleHauptthemen"]:checked ~ .filters [for="AlleHauptthemen"],
[value="H01"]:checked ~ .filters [for="H01"],
[value="H02"]:checked ~ .filters [for="H02"],
[value="H03"]:checked ~ .filters [for="H03"],
[value="H04"]:checked ~ .filters [for="H04"],
[value="H05"]:checked ~ .filters [for="H05"],
[value="H06"]:checked ~ .filters [for="H06"],
[value="H07"]:checked ~ .filters [for="H07"],
[value="H08"]:checked ~ .filters [for="H08"],
[value="H09"]:checked ~ .filters [for="H09"],
[value="H10"]:checked ~ .filters [for="H10"],
[value="AlleTypen"]:checked ~ .filters [for="AlleTypen"],
[value="T01"]:checked ~ .filters [for="T01"],
[value="T02"]:checked ~ .filters [for="T02"],
[value="T03"]:checked ~ .filters [for="T03"],
[value="T04"]:checked ~ .filters [for="T04"],
[value="T05"]:checked ~ .filters [for="T05"],
[value="T06"]:checked ~ .filters [for="T06"],
[value="T07"]:checked ~ .filters [for="T07"],
[value="T08"]:checked ~ .filters [for="T08"],
[value="T09"]:checked ~ .filters [for="T09"],
[value="AlleBereiche"]:checked ~ .filters [for="AlleBereiche"],
[value="B01"]:checked ~ .filters [for="B01"],
[value="B02"]:checked ~ .filters [for="B02"],
[value="B03"]:checked ~ .filters [for="B03"],
[value="B04"]:checked ~ .filters [for="B04"],
[value="AlleDaten"]:checked ~ .filters [for="AlleDaten"],
[value="D2022"]:checked ~ .filters [for="D2022"],
[value="D2023"]:checked ~ .filters [for="D2023"],
[value="D2024"]:checked ~ .filters [for="D2024"],
[value="D2025"]:checked ~ .filters [for="D2025"] {
  background-color: var(--color-prim3);
  color: var(--color-white);
  box-shadow: var(--shadow-chip);  
}


/* Bei Klick auf Alle, alle Beiträge mit 'data-category' Attribut werden angezeigt. */
[value="AlleHauptthemen"]:checked ~ .flex-postings [data-category],
[value="AlleTypen"]:checked ~ .flex-postings [data-category],
[value="AlleBereiche"]:checked ~ .flex-postings [data-category],
[value="AlleDaten"]:checked ~ .flex-postings [data-category] {
  display: block;
}


[value="H01"]:checked ~ .flex-postings .selectable:not([data-category~="H01"]),
[value="H02"]:checked ~ .flex-postings .selectable:not([data-category~="H02"]),
[value="H03"]:checked ~ .flex-postings .selectable:not([data-category~="H03"]),
[value="H04"]:checked ~ .flex-postings .selectable:not([data-category~="H04"]),
[value="H05"]:checked ~ .flex-postings .selectable:not([data-category~="H05"]),
[value="H06"]:checked ~ .flex-postings .selectable:not([data-category~="H06"]),
[value="H07"]:checked ~ .flex-postings .selectable:not([data-category~="H07"]),
[value="H08"]:checked ~ .flex-postings .selectable:not([data-category~="H08"]),
[value="H09"]:checked ~ .flex-postings .selectable:not([data-category~="H09"]),
[value="H10"]:checked ~ .flex-postings .selectable:not([data-category~="H10"]),
[value="T01"]:checked ~ .flex-postings .selectable:not([data-category~="T01"]),
[value="T02"]:checked ~ .flex-postings .selectable:not([data-category~="T02"]),
[value="T03"]:checked ~ .flex-postings .selectable:not([data-category~="T03"]),
[value="T04"]:checked ~ .flex-postings .selectable:not([data-category~="T04"]),
[value="T05"]:checked ~ .flex-postings .selectable:not([data-category~="T05"]),
[value="T06"]:checked ~ .flex-postings .selectable:not([data-category~="T06"]),
[value="B01"]:checked ~ .flex-postings .selectable:not([data-category~="B01"]),
[value="B02"]:checked ~ .flex-postings .selectable:not([data-category~="B02"]),
[value="B03"]:checked ~ .flex-postings .selectable:not([data-category~="B03"]),
[value="B04"]:checked ~ .flex-postings .selectable:not([data-category~="B04"]),
[value="D2022"]:checked ~ .flex-postings .selectable:not([data-category~="D2022"]),
[value="D2023"]:checked ~ .flex-postings .selectable:not([data-category~="D2023"]),
[value="D2024"]:checked ~ .flex-postings .selectable:not([data-category~="D2024"]),
[value="D2025"]:checked ~ .flex-postings .selectable:not([data-category~="D2025"]) {
  display: none;
}

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 650px) {
  html {
    font-size: 14px;
  }

  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}