/* ======================================================================
   Feed — das Kachelraster der Projekte-Übersicht
   ----------------------------------------------------------------------
   Eigener Nachbau, Werte aus der Messung des gerenderten Zustands.

   Zwölf Spalten, und jede Kachel bekommt ihren Platz ausdrücklich
   zugewiesen statt sich einzureihen:

     1. Kachel   1 / -1        volle Breite, Bild links + Text rechts
     2. + 3.     je 6 Spalten  quadratisch
     4. – 6.     je 4 Spalten  drei nebeneinander

   Ab 1068px fallen die unteren Reihen auf zwei Spalten zurück, auf dem
   Handy steht alles untereinander. Die Zuweisung über nth-child ist
   Absicht: so hängt die Anordnung am Platz im Raster und nicht an
   einer Klasse, die im CMS mitgepflegt werden müsste.
   ====================================================================== */

.pf-raster {
  /* margin:0 — sonst gibt die Browser-Vorgabe fuer <section> dem
     Block 13,6px Abstand nach oben. */
  margin: 0;
  padding: 52px 0 80px;
  background: #f5f5f7;
  overflow: hidden;
}
.pf-raster .pf-abschnitt-flaeche {
  width: 980px;
  margin-inline: auto;
}
.pf-raster .section-head {
  font-family: var(--pf-schrift-display);
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 1.125;
  font-weight: 700;
  letter-spacing: 0.004em;
}

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

.pf-raster ul {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-raster .pf-kachel-feld:nth-child(1) { grid-column: 1 / -1; }
.pf-raster .pf-kachel-feld:nth-child(2) { grid-column: 1 / span 6; }
.pf-raster .pf-kachel-feld:nth-child(3) { grid-column: 7 / span 6; }
.pf-raster .pf-kachel-feld:nth-child(4) { grid-column: 1 / span 4; }
.pf-raster .pf-kachel-feld:nth-child(5) { grid-column: 5 / span 4; }
.pf-raster .pf-kachel-feld:nth-child(6) { grid-column: 9 / span 4; }

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

.pf-raster .pf-kachel {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  /* z-index:0 macht die Kachel zur eigenen Ebene, damit die Rundung
     das Bild sauber schneidet. */
  z-index: 0;
  color: var(--pf-farbe-link);
  text-decoration: none;
}

/* Die große erste Kachel teilt sich waagerecht: Bild links, Text
   rechts. Die Textspalte hat ein festes Maß, das Bild nimmt den Rest —
   so bleibt die Textbreite über alle Bildschirmbreiten lesbar. */
.pf-raster .pf-kachel.pf-kachel-voll {
  display: grid;
  grid-template-columns: 1fr 337px;
  grid-template-rows: 362px;
  grid-template-areas: "media description";
  /* Nur die grosse Kachel setzt die Schrift fuer alles darin; die
     kleinen bleiben beim Grundmass und regeln je Bauteil. */
  font-family: var(--pf-schrift-display);
  font-size: 32px;
  line-height: 1.125;
  font-weight: 700;
  letter-spacing: 0.004em;
}
.pf-raster .pf-kachel.pf-kachel-halb {
  min-height: 472px;
}

/* Nur die grosse Kachel ist ein Raster — in den kleinen stapeln
   Bild und Text als Flex-Elemente. */
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-bild { grid-area: media; }
.pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-bild { flex-shrink: 1; }
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-text { grid-area: description; }

.pf-raster .pf-kachel .pf-kachel-bild {
  position: relative;
  z-index: 0;
  width: 100%;
  flex-shrink: 0;
  /* Feste Bildproportion: die Kachelhoehe haengt damit an der Breite
     und nicht daran, wie hoch das Bild zufaellig ist. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Schriftgroesse 0: das Bild ist ein Inline-Element, sonst bliebe
     unter ihm der Platz einer Textzeile stehen. */
  font-size: 0;
}
.pf-raster .pf-kachel .pf-kachel-text {
  display: flex;
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  box-sizing: border-box;
}
.pf-raster .pf-kachel-text-inhalt {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: space-between;
}

/* Kleine Kacheln setzen die Kategorie eine Stufe kleiner. */
/* Kategorie, Datum und Zeitangabe stehen in der Textschrift, die
   Ueberschrift in der Display-Variante — unabhaengig davon, was die
   Kachel drumherum setzt. */
.pf-raster .pf-kachel .pf-kachel-rubrik,
.pf-raster .pf-kachel .pf-kachel-augenbraue,
.pf-raster .pf-kachel .pf-kachel-datum {
  font-family: var(--pf-schrift-text);
}
.pf-raster .pf-kachel .pf-kachel-schlagzeile {
  font-family: var(--pf-schrift-display);
}

.pf-raster .pf-kachel .pf-kachel-rubrik {
  font-size: 12px;
  line-height: 1.33338;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #6e6e73;
}
.pf-raster .pf-kachel.pf-kachel-halb .pf-kachel-rubrik,
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-rubrik,
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-augenbraue {
  font-size: 14px;
  line-height: 1.28577;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: #6e6e73;
}
.pf-raster .pf-kachel .pf-kachel-schlagzeile {
  /* flow-root, damit der Aussenabstand der Überschrift innen bleibt
     und die Kachel nicht auseinanderdrückt. */
  display: flow-root;
  margin-top: 12px;
  overflow: hidden;
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 700;
  letter-spacing: 0.009em;
  color: var(--pf-farbe-text);
}
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-schlagzeile {
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: 0.004em;
}
/* Die dritte Reihe ist am schmalsten und geht eine Stufe herunter. */
.pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-schlagzeile {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.19048;
  letter-spacing: 0.011em;
}
.pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-text { padding: 24px; }
.pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-datum {
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: -0.014em;
}
.pf-raster .pf-kachel .pf-kachel-datum {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.2353;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #6e6e73;
}
.pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-datum { line-height: 1.47059; }

/* --- Bild ------------------------------------------------------------ */

.pf-raster .pf-kachel .pf-bildfeld {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Beim Überfahren wächst nur das Bild, nicht die Kachel — deshalb
   liegt das Abschneiden eine Ebene höher. */
.pf-raster .pf-kachel .pf-bildfeld-datei {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  overflow: clip;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.25, 1);
}
.pf-raster .pf-kachel:hover .pf-bildfeld-datei {
  transform: scale(1.03);
}

/* --- Knopf unter dem Raster ------------------------------------------ */

.pf-alle-knopf {
  padding: 12px 24px 11px;
  border-radius: 30px;
  background: #f5f5f7;
  font-weight: 600;
  line-height: 1.23530;
  text-decoration: none;
}
.pf-alle-knopf:hover {
  background: #ebebed;
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1068px) {
  .pf-raster { padding: 40px 0 64px; }
  .pf-raster .pf-abschnitt-flaeche { width: 692px; }
  .pf-raster .section-head {
    margin-bottom: 16px;
    font-size: 28px;
    line-height: 1.14286;
    letter-spacing: 0.007em;
  }
  /* Die unteren Reihen fallen von drei auf zwei Spalten. */
  .pf-raster .pf-kachel-feld:nth-child(4),
  .pf-raster .pf-kachel-feld:nth-child(5),
  .pf-raster .pf-kachel-feld:nth-child(6) { grid-column: span 6; }
  .pf-raster .pf-kachel-feld:nth-child(2),
  .pf-raster .pf-kachel-feld:nth-child(3) { grid-column: span 6; }

  .pf-raster .pf-kachel { border-radius: 24px; }
  .pf-raster .pf-kachel.pf-kachel-voll {
    font-size: 21px;
    line-height: 1.19048;
    letter-spacing: 0.011em;
  }
  .pf-raster .pf-kachel.pf-kachel-voll { grid-template-columns: 1fr 239px; }
  .pf-raster .pf-kachel.pf-kachel-halb { min-height: 328px; }
  .pf-raster .pf-kachel .pf-kachel-text { padding: 24px; }
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-rubrik,
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-augenbraue {
    font-size: 12px;
    line-height: 1.33338;
    letter-spacing: -0.01em;
  }
  .pf-raster .pf-kachel .pf-kachel-schlagzeile,
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-schlagzeile {
    margin-top: 8px;
    font-size: 21px;
    line-height: 1.19048;
    letter-spacing: 0.011em;
  }
  /* Die dritte Reihe behaelt hier den groesseren Abstand — sie steht
     ab dieser Breite zu zweit statt zu dritt und hat wieder Platz. */
  .pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-schlagzeile { margin-top: 12px; }
  /* Ab hier sind alle Kategorien gleich klein. */
  .pf-raster .pf-kachel.pf-kachel-halb .pf-kachel-rubrik {
    font-size: 12px;
    line-height: 1.33338;
    letter-spacing: -0.008em;
  }
  /* Die Zeitangabe faellt auf die kleine Stufe zurueck. */
  .pf-raster .pf-kachel .pf-kachel-datum,
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-datum {
    font-size: 14px;
    line-height: 1.28577;
    letter-spacing: -0.014em;
  }
}

/* Nur im Tabletbereich rechnet die grosse Kachel ihre Bildhoehe aus
   dem Raster statt aus der Bildproportion. */
/* Ab Tablet aufwaerts gibt das Raster die Hoehe der grossen Kachel
   vor, nicht die Bildproportion — das Bild fuellt die Zeile aus. */
@media only screen and (min-width: 735px) {
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-bild,
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-text {
    /* Beide fuellen die Rasterzeile. Ohne das zentriert das
       align-items:center der Kachel sie auf ihrer Inhaltshoehe. */
    height: 100%;
  }
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-bild { aspect-ratio: auto; }
}
@media only screen and (min-width: 735px) and (max-width: 1068px) {
  .pf-raster .pf-kachel.pf-kachel-voll { grid-template-rows: 255px; }
}

/* ---------- Handy ---------- */
@media only screen and (max-width: 734px) {
  .pf-raster { padding: 32px 0 40px; }
  .pf-raster .pf-abschnitt-flaeche { width: 87.5%; }
  .pf-raster .section-head {
    font-size: 24px;
    line-height: 1.16667;
    letter-spacing: 0.009em;
  }
  /* Eine Spalte, alle Zuweisungen fallen weg. */
  /* Auf dem Handy braucht es kein Raster mehr — eine Spalte, und
     flex-wrap sorgt fuer den Umbruch. */
  .pf-raster ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
  }
  .pf-raster .pf-kachel-feld:nth-child(1),
  .pf-raster .pf-kachel-feld:nth-child(2),
  .pf-raster .pf-kachel-feld:nth-child(3),
  .pf-raster .pf-kachel-feld:nth-child(4),
  .pf-raster .pf-kachel-feld:nth-child(5),
  .pf-raster .pf-kachel-feld:nth-child(6) { grid-column: auto; }

  /* Auch die grosse Kachel stapelt: Bild oben, Text darunter. */
  .pf-raster .pf-kachel.pf-kachel-voll {
    display: flex;
    grid-template-columns: 453px 1fr;
    grid-template-rows: none;
  }
  /* Nur die Textflaeche loest ihre Rasterzuweisung; das Bild behaelt
     sie, auch wenn sie im Flex-Fluss nichts mehr bewirkt. */
  .pf-raster .pf-kachel.pf-kachel-voll .pf-kachel-text { grid-area: auto; }
  .pf-raster .pf-kachel.pf-kachel-drittel .pf-kachel-schlagzeile { margin-top: 12px; }
  .pf-raster .pf-kachel.pf-kachel-halb { min-height: 0; }
  .pf-raster .pf-kachel .pf-kachel-text {
    padding: 24px;
    justify-content: flex-start;
  }
}