/* Block „RF Themen-Kacheln“ – template-parts/blocks/rf-topics.php */

.rf-topics--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.rf-topics--tile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rf-topics--image {
  position: relative;
  height: 300px;
  background-color: var(--grey);
}
.rf-topics--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rf-topics--label {
  position: absolute;
  top: 25px;
  left: 50px;
  padding: 10px 22px;
  background-color: var(--rf-color);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}
.rf-topics--content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 50px 50px 45px;
  background-color: var(--rf-color);
}
.rf-topics--content h3 {
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 15px;
}
.rf-topics--content p {
  color: var(--white);
  margin-bottom: 35px;
}
.rf-topics--content .btn {
  margin-top: auto;
}
@media (max-width: 767px) {
  .rf-topics--grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rf-topics--image {
    height: 220px;
  }
  .rf-topics--label {
    left: 25px;
  }
  .rf-topics--content {
    padding: 35px 25px;
  }
  .rf-topics--content h3 {
    font-size: 26px;
  }
}

/* Auf hellen Farben ist die Schrift dunkel */
.rf-topics--tile.rf-color-cyan .rf-topics--label,
.rf-topics--tile.rf-color-green .rf-topics--label,
.rf-topics--tile.rf-color-cyan .rf-topics--content h3,
.rf-topics--tile.rf-color-green .rf-topics--content h3,
.rf-topics--tile.rf-color-cyan .rf-topics--content p,
.rf-topics--tile.rf-color-green .rf-topics--content p {
  color: var(--navy);
}

/* Smartphone */
@media (max-width: 767px) {
  .rf-topics--label {
    top: 10px;
    left: 10px;
    padding: 12px 18px;
    font-size: 16px;
  }
  .rf-topics--tile.rf-color-cyan .btn .btn-content,
  .rf-topics--tile.rf-color-green .btn .btn-content {
    background-color: var(--royal);
    color: var(--white);
  }
}

/* Tablet: lange Titel passen in die Kachel */
@media (min-width: 768px) and (max-width: 991px) {
  .rf-topics--content {
    padding: 35px 30px;
  }
  .rf-topics--content h3 {
    font-size: 26px;
  }
  .rf-topics--label {
    left: 30px;
  }
}