/* ======================================================================
   Stories — das Blog-Modul
   ----------------------------------------------------------------------
   Eigener Nachbau, Werte aus der Messung des gerenderten Zustands.

   Anders als der Feed darüber liegt hier der Text IM Bild: jede Kachel
   ist ein Bild, darüber ein dunkler Verlauf, darauf die Schrift in
   Weiß. Der Verlauf ist ein eigenes Element, kein Filter auf dem Bild —
   nur so bleibt das Bild beim Überfahren scharf, während es wächst.

   Vier Kacheln: die erste über die volle Breite, die drei darunter zu
   je sechs Spalten. Auf dem Handy stehen alle untereinander.
   ====================================================================== */

.pf-blogmodul {
  padding: 32px 0 75px;
  background: #fff;
}
/* Folgt das Modul auf den Feed, braucht es oben deutlich mehr Luft —
   dort endet ein grauer Block, hier beginnt ein weisser. Steht es
   allein auf der Blog-Seite, reichen die 32px oben. */
.pf-raster + .pf-blogmodul {
  padding-top: 80px;
}
.pf-blogmodul .pf-abschnitt-flaeche {
  width: 980px;
  margin-inline: auto;
}

/* --- Kopfbereich ---------------------------------------------------- */

.pf-blogmodul-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48px;
  text-align: center;
}
.pf-blogmodul-kopf .pf-unterzeile {
  margin-top: 10px;
  line-height: 1.23536;
  font-weight: 700;
}

/* --- Das Raster ----------------------------------------------------- */

.pf-blogmodul .pf-kachelreihe {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-blogmodul .pf-kachelreihe > :nth-child(1) { grid-column: 1 / -1; }
.pf-blogmodul .pf-kachelreihe > :nth-child(2) { grid-column: 1 / span 4; }
.pf-blogmodul .pf-kachelreihe > :nth-child(3) { grid-column: 5 / span 4; }
.pf-blogmodul .pf-kachelreihe > :nth-child(4) { grid-column: 9 / span 4; }
.pf-blogmodul .pf-kachelreihe > :nth-child(2),
.pf-blogmodul .pf-kachelreihe > :nth-child(3),
.pf-blogmodul .pf-kachelreihe > :nth-child(4) {
  overflow: hidden;
}

/* --- Die Kachel ----------------------------------------------------- */

.pf-blogmodul .pf-kachel {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  z-index: 0;
  color: var(--pf-farbe-link);
  text-decoration: none;
}
.pf-blogmodul .pf-kachel-drittel.pf-kachel-randlos {
  min-height: 314px;
}

/* Bild und Verlauf liegen deckungsgleich hinter dem Text.
   Schriftgroesse 0, weil Bild und picture Inline-Elemente sind und
   sonst die Hoehe einer Textzeile mitbringen. */
.pf-blogmodul .pf-kachel .pf-kachel-bild,
.pf-blogmodul .pf-kachel .pf-verlaufsschicht {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  font-size: 0;
  line-height: 0;
}
.pf-blogmodul .pf-kachel .pf-kachel-bild {
  z-index: 0;
  overflow: hidden;
}
.pf-blogmodul .pf-kachel .pf-bildfeld {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Nur in der grossen Kachel liegt das Bild eine Ebene ueber dem
   Verlaufsrahmen. */
.pf-blogmodul .pf-kachel-voll.pf-kachel-aufmacher .pf-bildfeld {
  z-index: 1;
}
/* Bei den randlosen Kacheln fuellt das Bild die Kachel und nicht nur
   eine Bildflaeche darin. */
.pf-blogmodul .pf-kachel-drittel.pf-kachel-randlos .pf-bildfeld {
  display: flex;
}
.pf-blogmodul .pf-kachel .pf-bildfeld-datei {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: clip;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.25, 1);
}
.pf-blogmodul .pf-kachel:hover .pf-bildfeld-datei {
  transform: scale(1.03);
}

/* Der Verlauf: ein eigenes Element über dem Bild. Das Pseudo-Element
   darin ist zweieinhalbmal so hoch wie die Kachel und ragt oben
   hinaus — dadurch ist die Rampe lang und weich statt als Kante
   sichtbar. */
.pf-blogmodul .pf-kachel-verlauf,
.pf-blogmodul .pf-kachel-verlauf-zweit {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: flex-end;
}
.pf-blogmodul .pf-kachel-verlauf {
  z-index: 2;
}
.pf-blogmodul .pf-kachel-verlauf::before {
  content: "";
  position: absolute;
  inset: -150% 0 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.74) 8%,
    rgba(0, 0, 0, 0.56) 18%,
    rgba(0, 0, 0, 0.33) 28%,
    rgba(0, 0, 0, 0.14) 36%,
    rgba(0, 0, 0, 0.04) 42%,
    rgba(0, 0, 0, 0) 46%
  );
}

/* --- Text ------------------------------------------------------------ */

.pf-blogmodul .pf-kachel .pf-kachel-text {
  display: flex;
  position: relative;
  z-index: 3;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 36px 36px;
  box-sizing: border-box;
}
.pf-blogmodul .pf-kachel-text-inhalt {
  display: flex;
  flex-direction: column;
}
/* Randlose Kacheln: Text unten, und der Inhaltsblock nimmt alles bis
   auf die Zeile der Datumsangabe (44px) ein. */
.pf-blogmodul .pf-kachel.pf-kachel-drittel.pf-kachel-randlos .pf-kachel-text {
  z-index: 1;
  /* Feste Mindesthoehe auf allen Breiten: so ist die dunkle Flaeche
     unter dem Text immer gleich hoch, egal wie lang die Ueberschrift
     ausfaellt. Ohne sie schrumpft sie auf die Texthoehe zusammen. */
  min-height: 186px;
  justify-content: flex-end;
}
.pf-blogmodul .pf-kachel.pf-kachel-drittel.pf-kachel-randlos .pf-kachel-text-inhalt {
  flex: 1 1 calc(100% - 44px);
}
.pf-blogmodul .pf-kachel .pf-kachel-schlagzeile {
  display: flow-root;
  margin-top: 12px;
  overflow: hidden;
  font-family: var(--pf-schrift-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: normal;
  color: #fff;
}
.pf-blogmodul .pf-kachel.pf-kachel-drittel.pf-kachel-randlos .pf-kachel-schlagzeile {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.19048;
  letter-spacing: 0.011em;
}
.pf-blogmodul .pf-kachel .pf-kachel-datum {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  font-weight: 600;
  color: #fff;
}
.pf-blogmodul .pf-kachel.pf-kachel-drittel.pf-kachel-randlos .pf-kachel-datum {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: -0.014em;
}

/* --- Themen-Plaketten ------------------------------------------------
   Die Farbe kommt aus dem CMS: jedes Thema hat seine Nummer. Alle
   Töne sind so dunkel gewählt, dass Weiß darauf sicher lesbar ist. */
.pf-blogmodul .pf-plakette {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 6px;
  border-radius: 16px;
  background: #065ec6;
  font-size: 14px;
  line-height: 1.28577;
  font-weight: 700;
  letter-spacing: -0.016em;
  text-transform: uppercase;
  color: #fff;
}
.pf-blogmodul .pf-kachel-drittel.pf-kachel-randlos .pf-plakette {
  font-size: 12px;
  line-height: 1.33338;
  /* In Pixeln statt em: die Plakette bleibt bei 12px, behaelt aber
     die Laufweite der grossen Stufe. */
  letter-spacing: -0.2px;
}
/* Der Knopf unter dem Raster steht mittig und traegt Textfarbe statt
   Linkblau — er ist eine Schaltflaeche, kein Verweis im Fliesstext. */
.pf-blogmodul .pf-alle-huelle {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.pf-blogmodul .pf-alle-knopf {
  color: var(--pf-farbe-text);
}

.pf-blogmodul .pf-plakette-3 { background: #661d9d; }
.pf-blogmodul .pf-plakette-4 { background: #d28314; }
.pf-blogmodul .pf-plakette-7 { background: #5c800f; }

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1068px) {
  .pf-blogmodul { padding-bottom: 59px; }
  .pf-blogmodul .pf-alle-huelle { margin-top: 28px; }
  .pf-raster + .pf-blogmodul { padding-top: 64px; }
  .pf-blogmodul .pf-abschnitt-flaeche { width: 692px; }
  .pf-blogmodul-kopf .pf-unterzeile { line-height: 1.05887; }
  .pf-blogmodul .pf-kachel { border-radius: 24px; }
  .pf-blogmodul .pf-kachel-drittel.pf-kachel-randlos { min-height: 332px; }
  .pf-blogmodul .pf-kachel .pf-kachel-text { padding: 0 24px 24px; }
  .pf-blogmodul .pf-kachel .pf-kachel-schlagzeile {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.003em;
  }
  /* Unterzeile und Datumsangabe fallen eine Stufe herunter. */
  .pf-blogmodul-kopf .pf-unterzeile,
  .pf-blogmodul .pf-kachel .pf-kachel-datum {
    font-size: 14px;
    line-height: 1.28577;
    letter-spacing: -0.016em;
  }
}

/* ---------- Handy ---------- */
@media only screen and (max-width: 734px) {
  .pf-blogmodul {
    padding-bottom: 35px;
    /* Nur auf dem Handy waagerecht abschneiden: dort reicht die
       gewachsene Kachel sonst ueber die Seitenkante hinaus. */
    overflow: hidden auto;
  }
  /* Auf dem Handy nimmt die Unterzeile die volle Breite — zentriert
     umbrechen lohnt sich erst, wenn daneben Platz waere. */
  .pf-blogmodul-kopf .pf-unterzeile {
    width: 100%;
    letter-spacing: -0.2px;
  }
  .pf-blogmodul .pf-alle-huelle { margin-top: 24px; }
  .pf-raster + .pf-blogmodul { padding-top: 40px; }
  .pf-blogmodul .pf-abschnitt-flaeche { width: 87.5%; }
  .pf-blogmodul .pf-kachelreihe {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pf-blogmodul .pf-kachelreihe > :nth-child(1),
  .pf-blogmodul .pf-kachelreihe > :nth-child(2),
  .pf-blogmodul .pf-kachelreihe > :nth-child(3),
  .pf-blogmodul .pf-kachelreihe > :nth-child(4) { grid-column: auto; }
  .pf-blogmodul .pf-kachel-drittel.pf-kachel-randlos { min-height: 0; }
  .pf-blogmodul .pf-kachel .pf-kachel-schlagzeile {
    font-size: 24px;
    line-height: 1.16667;
  }
  .pf-blogmodul .pf-plakette {
    font-size: 12px;
    line-height: 1.33338;
    letter-spacing: -0.01em;
  }
}