/* ======================================================================
   Artikel-Layout (Projekte, Blog, App-Seiten)
   ----------------------------------------------------------------------
   Eigener Nachbau, Werte aus der Messung des gerenderten Zustands.

   Zwei Stufen, das ist die ganze Idee:

     .pf-spalte          980 / 692 / volle Breite   — mittig
       .pf-spalte-inhalt  653 / 576 / 87,5%        — linksbündig

   Bilder und Faktenblöcke sitzen auf der äußeren Breite, Fließtext auf
   der inneren. Dadurch steht die Textspalte immer links an derselben
   Kante, während Bilder daneben herausragen — der Rhythmus, der eine
   Artikelseite von einer Textwüste unterscheidet.

   Auf dem Handy kippt die Zentrierung nach innen: der Container nimmt
   die volle Breite, und erst die Inhaltsspalte hält die 87,5 % ein.
   ====================================================================== */

.main {
  /* Waagerecht abschneiden, senkrecht scrollen: Bilder duerfen ueber
     die Seitenkante hinausragen, ohne eine Querleiste zu erzeugen. */
  overflow: hidden auto;
}

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

.pf-spalte {
  width: 980px;
  margin-inline: auto;
}
/* Klammert schwimmende Kinder ein. Das ::before verhindert zusätzlich,
   dass der Aussenabstand des ersten Kindes mit dem Block zusammenfällt. */
.pf-spalte::before,
.pf-spalte::after {
  content: " ";
  display: table;
}
.pf-spalte::after {
  clear: both;
}

.pf-spalte-inhalt {
  width: 653px;
  margin-right: auto;
}
/* Bilder brechen aus der Textspalte aus und nehmen die volle Breite. */
.pf-bild-gross .pf-spalte-inhalt,
.image:not(.pf-bild-randlos) .pf-spalte-inhalt {
  width: 100%;
}

/* --- Titelbereich --------------------------------------------------- */

.pf-artikelkopf {
  margin-top: 52px;
}
.pf-artikeltitel.pf-spalte {
  margin-block: 0;
}
.pf-artikeltitel .pf-artikel-schlagzeile {
  font-family: var(--pf-schrift-display);
  font-size: 48px;
  line-height: 1.08349;
  font-weight: 700;
  letter-spacing: -0.003em;
}
.pf-artikel-unterzeile {
  font-family: var(--pf-schrift-display);
  margin-top: 20px;
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 500;
  letter-spacing: 0.009em;
}

/* Kategorie und Datum über der Überschrift — untereinander, nicht
   nebeneinander: beide sind eigene Zeilen (display:block). */
.category.pf-spalte {
  margin-top: 52px;
  margin-bottom: 20px;
}
.pf-augenbraue {
  font-size: 12px;
  line-height: 1.33338;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.pf-augenbraue-rubrik,
.pf-augenbraue-datum {
  display: block;
  color: #6e6e73;
}
.pf-augenbraue-rubrik {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.pf-augenbraue-datum {
  font-size: 14px;
  line-height: 1.28577;
  font-weight: 600;
  letter-spacing: -0.014em;
}

/* --- Fließtext ------------------------------------------------------ */

/* Oben UND unten derselbe Abstand: benachbarte Bloecke fallen zu
   einem einzigen 44er zusammen, der letzte laesst trotzdem Luft. */
.pf-fliesstext {
  font-family: var(--pf-schrift-display);
  margin-block: 44px;
  font-size: 19px;
  line-height: 1.4211;
  letter-spacing: 0.012em;
}
.pf-fliesstext-absatz {
  margin-bottom: 27px;
}
/* Der letzte Block im Container laesst den Abstand weg — sonst
   summierte er sich mit dem Abstand des naechsten Bausteins. */
.pf-fliesstext-absatz:last-child {
  margin-bottom: 0;
}
.pf-fliesstext-titel {
  font-family: var(--pf-schrift-display);
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 700;
  letter-spacing: 0.009em;
}

/* --- Bilder --------------------------------------------------------- */

.image {
  margin-block: 44px;
}
/* Der Rahmen um das Bild: die Rundung greift nur, wenn hier
   abgeschnitten wird — das Bild selbst bleibt rechteckig. */
/* z-index:0 macht den Rahmen zur eigenen Ebene. Ohne das legt sich
   das Bild bei manchen Zeichenreihenfolgen ueber die abgerundete
   Kante und die Ecken wirken hart. */
.pf-bildrahmen {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 10px;
}
.pf-bilddatei {
  overflow: clip;
}
/* Bildunterschrift: normalerweise ueber die ganze Bildbreite, nur
   16px vom Rand weg. Zwei Teile darin — Text links, Zusatz rechts. */
.pf-bildunterschrift {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
  margin: 16px 16px 0;
  font-size: 12px;
  line-height: 1.33338;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #6e6e73;
}
/* Nimmt den Platz links, damit ein etwaiger Zusatz rechts stehen
   bleibt statt mittig zusammenzurutschen. */
.pf-bildunterschrift-text {
  flex-grow: 1;
}
/* Nur bei Bildern auf Textspaltenbreite folgt auch die Unterschrift
   der Textspalte statt der Bildkante. */
.pf-textbreite .pf-bildunterschrift {
  width: 653px;
  margin-inline: auto;
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1068px) {
  .pf-spalte { width: 692px; }
  .pf-spalte-inhalt { width: 576px; }
  .pf-bildunterschrift { margin-top: 12px; }
  .pf-textbreite .pf-bildunterschrift { width: 576px; }

  .pf-artikelkopf { margin-top: 40px; }
  .category.pf-spalte { margin-top: 40px; }

  .pf-artikeltitel .pf-artikel-schlagzeile {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: normal;
  }
  .pf-artikel-unterzeile {
    margin-top: 16px;
    font-size: 21px;
    line-height: 1.19048;
    letter-spacing: 0.011em;
  }
  .pf-fliesstext {
    /* Ab hier traegt der Fliesstext wieder die Textschrift: die
       Display-Variante ist fuer 19px und groesser gezeichnet. */
    font-family: var(--pf-schrift-text);
    margin-block: 36px;
    font-size: 17px;
    line-height: 1.47059;
    letter-spacing: -0.022em;
  }
  .pf-fliesstext-titel {
    margin-top: 12px;
    font-size: 21px;
    line-height: 1.19048;
    letter-spacing: 0.011em;
  }
  .image { margin-block: 36px; }
}

/* Nur im Tablet-Bereich, nicht darunter: dort ist der Platz am
   knappsten, und beide Angaben duerfen 7px ueber die Textspalte
   hinausragen. Auf dem Handy passt es wieder ohne. */
@media only screen and (min-width: 735px) and (max-width: 1068px) {
  .pf-augenbraue-rubrik,
  .pf-augenbraue-datum {
    margin-right: -7px;
  }
}

/* Ab Tablet aufwaerts laesst display:table den Bildrahmen auf die
   Bildbreite zusammenschrumpfen statt den Container zu fuellen. Auf
   dem Handy fuellt er ihn absichtlich ganz aus. */
@media only screen and (min-width: 735px) {
  .image:not(.pf-bild-randlos) .pf-bildrahmen {
    display: table;
  }
}

/* ---------- Handy ---------- */
@media only screen and (max-width: 734px) {
  /* Der Container gibt die Zentrierung ab: er nimmt die volle Breite,
     die Inhaltsspalte haelt die 87,5 % — sonst muesste jedes Bild
     seine eigene Ausnahme bekommen, um randlos zu sein. */
  .pf-spalte { width: 100%; }
  .pf-spalte-inhalt {
    width: 87.5%;
    margin-inline: auto;
  }
  .pf-bild-gross .pf-spalte-inhalt,
  .image:not(.pf-bild-randlos) .pf-spalte-inhalt { width: 100%; }
  .pf-textbreite .pf-bildunterschrift { width: 87.5%; }

  .pf-artikelkopf { margin-top: 32px; }
  .category.pf-spalte { margin-top: 32px; }
  .pf-artikeltitel .pf-artikel-schlagzeile {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0.004em;
  }
  .pf-fliesstext { margin-block: 32px; }
  .image { margin-block: 32px; }
}