/* RESET / BASE ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Work Sans", sans-serif;
  background-color: #F8F8F8;
  color: #5A5A5A;
}

/* FONT HELPERS ---------------------------------------------------------- */

.ibm-bold  { font-family: "IBM Plex Sans"; font-weight: 700; }
.ibm-semi  { font-family: "IBM Plex Sans"; font-weight: 600; }
.ibm-light { font-family: "IBM Plex Sans"; font-weight: 300; }

.work-light { font-family: "Work Sans"; font-weight: 300; }
.work-semi  { font-family: "Work Sans"; font-weight: 600; }
.work-bold  { font-family: "Work Sans"; font-weight: 700; }

/* PAGE WRAPPER ---------------------------------------------------------- */

.page {
  max-width: 1920px;
  margin: 0 auto;
  padding: 90px 140px 80px;
}

/* HEADER ---------------------------------------------------------- */

/* was 90.67 / 120, now 68 / 90 */
.tips-heading {
  margin: 0;
  color: #7947C9;
  font-size: 68px;
  line-height: 90px;
}

/* was 34.67 / 48, now 26 / 36 */
.header-meta {
  text-align: right;
  font-size: 26px;
  line-height: 36px;
}

/* POSTS ---------------------------------------------------------- */

.posts {
  margin-top: 196px;
}

.post {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 16px;
}

.post + .post {
  margin-top: 160px;
}

/* v.xx – was 56px, now 42px */
.post-version {
  grid-column: 1;
  align-self: end;
  font-size: 42px;
  color: #7947C9;
}

/* Headline – was 69.33px, now 52px */
.post-title {
  grid-column: 2 / 5;
  align-self: end;
  margin: 0;
  font-size: 52px;
}

/* Date – was 56px, now 42px */
.post-date {
  grid-column: 5;
  align-self: end;
  justify-self: end;
  font-size: 42px;
  color: #7947C9;
  white-space: nowrap;
}

/* Copy text – was 34.67 / 48, now 26 / 36 */
.post-copy {
  grid-column: 2 / 6;
  margin-top: 32px;
  font-size: 26px;
  line-height: 36px;
}

/* Artikel lesen – was 34.67px, now 26px */
.post-link {
  grid-column: 2 / 6;
  margin-top: 32px;
  font-size: 26px;
  color: #7947C9;
  text-decoration: none;
  white-space: nowrap;
}

.post-link:hover {
  text-decoration: underline;
}

/* PAGE / PAGINATION ----------------------------------------------------- */

.page-section {
  position: relative;
  margin-top: 222px;
}

/* PAGE – was 90.67 / 120, now 68 / 90 */
.page-label {
  font-size: 68px;
  line-height: 90px;
  color: #7947C9;
}

/* pagination – was 34.67px, now 26px; still gap 22px; color purple; centered with PAGE */
.pagination {
  font-size: 26px;
  color: #7947C9;
  display: flex;
  justify-content: center;
  gap: 22px;
  position: relative;
  top: -45px; /* visual centering with PAGE's vertical middle */
}

/* FOOTER ---------------------------------------------------------- */

/* was 32px, now 24px */
.footer {
  margin-top: 172px;
  text-align: center;
  font-size: 24px;
  color: #B5B5B5;
}

/* RESPONSIVE STRUCTURE --------------------------------------------- */

@media (max-width: 1200px) {
  .page-header {
    flex-direction: column;
    row-gap: 24px;
  }

  .header-meta {
    text-align: left;
  }
}