/* Same gap under the header bar at every width: 34px margin here, the same
   value as the hero module on the other pages, plus the box padding minus the
   bar height. 54px from bar to headline. */
.post__hero {
  margin-bottom: var(--pd-space-module);
  margin-top: 34px;
}

/* Post hero. The gradient graphic is its own element bottom right (see
   :after), so the box carries no background image. The box runs under the
   fixed header bar. The content keeps the same distance to all four sides of the
   box (--pd-hero-inset), at the top below the bar the page is laid out against (--pd-layout-bar). */
.post__hero .container {
  border-radius: var(--pd-radius-box);
  overflow: hidden;
  padding: calc(var(--pd-layout-bar) + var(--pd-hero-inset)) 0 var(--pd-hero-inset);
}

.post__hero .container .content {
  width: calc(100% - 2 * var(--pd-hero-inset));
}

/* Gradient graphic, bottom right. Fixed ratio 891:690, driven by its height.
   The graphic has a hard top edge, the mask fades it out. */
.post__hero .container:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  height: clamp(260px, 55vw, 420px);
  aspect-ratio: 891/690;
  background: url(/hubfs/pdc-2025/post-blur.png) right bottom/contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}

/* Single column by default: text across the full width, image below it.
   Two columns from 900px, see below. */
.post__hero .content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 48px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* margin-top: 0 drops the browser default above the h1. Headline and image
   then start on the same line and the gap to the header bar comes from the
   box padding alone. */
.post__hero .content h1.gradientTitle {
  margin-top: 0;
  font-size: 40px;
  font-weight: var(--pd-fw-black);
  line-height: 48px;
  margin-bottom: 8px;
}

/* Phone: one step down, so a long title does not fill the screen before
   the summary starts. */
@media (max-width: 479px) {
  .post__hero .content h1.gradientTitle {
    font-size: 32px;
    line-height: 38px;
  }
}

/* Key takeaways: vertical bars instead of bullets. */
.post__short>ul {
  padding-left: 0;
}

.post__short>ul>li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.post__short>ul>li:last-child {
  margin-bottom: 0;
}

.post__short>ul>li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 20px;
  background: var(--pd-navy);
  border-radius: var(--pd-radius-line);
}

.post__short p {
  margin-bottom: 12px;
  font-size: var(--pd-fs-lead);
  line-height: var(--pd-lh-lead);
}

.post__short>ul>li {
  font-size: var(--pd-fs-article-note);
  line-height: var(--pd-lh-article-note);
}

.post_heroTxt {
  max-width: 640px;
}

.post__info {
  font-size: var(--pd-fs-sm);
  line-height: var(--pd-lh-sm);
  margin-bottom: 32px;
}

.post__info a {
  color: var(--pd-text);
  text-decoration: none;
}

/* Post image: scales with the column and keeps its 16:9 ratio. The focus sits
   above the centre, since the subjects of the source images are in their
   upper half. */
.post__heroImg {
  border-radius: var(--pd-radius-box);
  overflow: hidden;
  height: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 640px;
}

/* The image fills the 16:9 box; cropped around a point 22% from the top */
.post__heroImg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.post__content {
  margin: 0 auto;
  max-width: 862px;
  padding: 40px 0 48px;
  width: 90%;
}

.post__content h2,
.post__content h3,
.post__content .tagline,
.post__content h4,
.post__content ol,
.post__content p,
.post__content ul {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.post__content h1 {
  font-size: 30px;
  margin: 0 auto;
  max-width: 862px;
  padding: 0 0 20px;
}

.post__content h1,
.post__content h2,
.post__content h3,
.post__content .tagline,
.post__content h4 {
  font-weight: var(--pd-fw-black);
  line-height: 1.2;
  text-align: left;
}

.post__content h2 {
  font-size: var(--pd-fs-article-h2);
  line-height: var(--pd-lh-article-h2);
  padding: 0 0 16px 0;
}

.post__content h3, .post__content .tagline {
  margin-top: 30px;
}

.post__content h2:first-child {
  margin-top: 0;
}

.post__short h2,
.post__short h3,
.post__short .tagline,
.post__short h4 {
  font-weight: var(--pd-fw-bold);
  line-height: 1.2;
  margin-bottom: 12px;
}

.post__content h2 {
  font-size: var(--pd-fs-article-h2);
  line-height: var(--pd-lh-article-h2);
  padding: 0 0 16px;
}

.post__content h3, .post__content .tagline {
  font-size: var(--pd-fs-article-h3);
  line-height: var(--pd-lh-article-h3);
}

.post__short h2, .post__short h3, .post__short .tagline {
  font-size: var(--pd-fs-lg);
  line-height: var(--pd-lh-lg);
}

.post__content h4 {
  font-size: var(--pd-fs-article-h4);
  line-height: var(--pd-lh-article-h4);
}

.post__content h3,
.post__content .tagline,
.post__content h4 {
  padding: 0 0 16px;
}

.post__content p,
.post__short p {
  margin-bottom: 16px;
  text-align: left;
}

.post__short a {
  font-weight: var(--pd-fw-bold);
  text-decoration: none;
}

.post__content a,
.post__short a {
  color: var(--pd-text);
  transition: var(--pd-transition);
}

.post__content a:hover,
.post__short a:hover {
  color: var(--pd-berry);
}

/* On the navy table head a berry hover would lose contrast */
.post__content table .tableHead a:hover {
  color: var(--pd-highlight);
}

.post__content blockquote {
  border-left: 2px solid var(--pd-accent);
  font-size: var(--pd-fs-lg);
  font-style: italic;
  line-height: var(--pd-lh-lg);
  margin: 36px auto;
  max-width: 680px;
  padding: 0 0 0 20px;
  text-align: left;
}

.post__content blockquote p:last-child {
  margin-bottom: 0;
}

/* Standalone quote with its source: figure.quote > blockquote + figcaption. The source
   belongs to the quote in the markup, so nothing slipping in between can detach it.
   A quote the text introduces, naming its source before it, stays a bare blockquote. */
.post__content figure.quote {
  margin: 36px auto;
  max-width: 680px;
}

.post__content figure.quote blockquote {
  margin: 0;
}

.post__content figure.quote figcaption {
  color: var(--pd-text-muted);
  font-size: 16px;
  font-style: italic;
  line-height: 28px;
  margin-top: 6px;
  text-align: left;
}

/* Quote with a photo of its source: figure.quote.quote--photo > img.quote__photo + blockquote + figcaption.
   Square photo with the box radius, flush with the text column; quote and source beside it from 640px,
   below it on the phone. */
.post__content figure.quote--photo {
  display: grid;
  grid-template-areas: "photo" "quote" "source";
  grid-template-columns: 1fr;
  row-gap: 16px;
}

.post__content figure.quote--photo .quote__photo {
  aspect-ratio: 1;
  border-radius: var(--pd-radius-box);
  display: block;
  grid-area: photo;
  height: auto;
  margin: 0;
  object-fit: cover;
  width: 96px;
}

.post__content figure.quote--photo blockquote {
  grid-area: quote;
}

/* The source starts with the quote text, not with its rule */
.post__content figure.quote--photo figcaption {
  grid-area: source;
  margin-top: 0;
  padding-left: 22px;
}

@media (min-width: 640px) {
  .post__content figure.quote--photo {
    align-items: start;
    column-gap: 24px;
    grid-template-areas: "photo quote" "photo source";
    grid-template-columns: 120px 1fr;
    row-gap: 8px;
  }

  .post__content figure.quote--photo .quote__photo {
    width: 120px;
  }
}

/* Older form, still in drafts: blockquote.quote followed by the source paragraph */
.post__content blockquote.quote {
  margin: 36px auto 0;
  max-width: 680px;
}

.post__content blockquote.quote+p {
  color: var(--pd-text-muted);
  font-size: 16px;
  font-style: italic;
  line-height: 28px;
  margin-bottom: 36px;
  margin-top: 6px;
}

.post__content p img {
  border-radius: var(--pd-radius-box);
  display: block;
  height: auto;
  margin: 48px auto;
  max-width: 100%;
}

.post__content p:has(> img) {
  max-width: 862px;
}

.post__content p.afterimage {
  border-left: 2px solid var(--pd-text-muted);
  color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm);
  line-height: var(--pd-lh-sm);
  margin-bottom: 42px;
  margin-top: -40px;
  padding-left: 8px;
  max-width: 862px;
}

.post__content ol,
.post__content ul {
  margin-bottom: 16px;
  padding-left: 28px;
  text-align: left;
}

div[data-hs-responsive-table=true] {
  margin-bottom: 30px;
  margin-top: 30px;
}

.tableWrap {
  margin: 30px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--pd-navy) var(--pd-track);
}

.tableWrap::-webkit-scrollbar {
  height: 8px;
}

.tableWrap::-webkit-scrollbar-track {
  background: var(--pd-track);
  border-radius: var(--pd-radius-pill);
}

.tableWrap::-webkit-scrollbar-thumb {
  background: var(--pd-navy);
  border-radius: var(--pd-radius-pill);
}

/* The fade marks content continuing to the right; it only applies while the table overflows. */
.tableWrap.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}

@supports (animation-timeline: scroll(self inline)) {
  .tableWrap.is-scrollable {
    animation: tableWrapFade linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes tableWrapFade {
    0%, 80% {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
      mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    }
    100% {
      -webkit-mask-image: linear-gradient(to right, #000 100%, transparent 100%);
      mask-image: linear-gradient(to right, #000 100%, transparent 100%);
    }
  }
}

.post__content table {
  border-collapse: separate;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  min-width: 600px;
}

/* A table no wider than the text column starts with the text (module.js sets .is-narrow); a wider one is centred
   in the full width. 680px is the text column of .post__content p. */
.post__content .tableWrap.is-narrow table {
  margin-left: max(0px, calc((100% - 680px) / 2));
}

/* A table saved without .tableWrap (module.js adds the wrapper on load): until then, and
   without JavaScript, the table keeps to the text column and its rows scroll inside it
   instead of breaking out of the page. The table sits in HubSpot's rich-text span, so the
   rule asks for a parent that is not .tableWrap; once wrapped, it no longer applies. */
.post__content :not(.tableWrap) > table {
  display: block;
  min-width: 0;
  overflow-x: auto;
}

/* Separate borders instead of collapsed ones, so the corner cells can carry the radius of the other boxes.
   Every cell draws its right and bottom line; the first row and column add the top and left line. */
.post__content table td,
.post__content table th {
  border: 1px solid var(--pd-navy);
  border-width: 0 1px 1px 0;
  padding: 10px;
  word-break: normal;
  overflow-wrap: break-word;
}

.post__content table tr:first-child > * {
  border-top-width: 1px;
}

.post__content table tr > :first-child {
  border-left-width: 1px;
}

.post__content table tr:first-child > :first-child {
  border-top-left-radius: var(--pd-radius-box);
}

.post__content table tr:first-child > :last-child {
  border-top-right-radius: var(--pd-radius-box);
}

.post__content table tr:last-child > :first-child {
  border-bottom-left-radius: var(--pd-radius-box);
}

.post__content table tr:last-child > :last-child {
  border-bottom-right-radius: var(--pd-radius-box);
}

.post__content table .tableHead,
.post__content table .tableHead * {
  background-color: var(--pd-navy);
  color: var(--pd-text-inverse);
}

.post__content table p {
  margin-bottom: 0;
  text-align: left;
}

.post__content .ctabox {
  background: var(--pd-gradient-cta);
  border-radius: var(--pd-radius-box);
  color: var(--pd-text-inverse);
  margin: 40px auto;
  max-width: 764px;
  padding: 24px;
  text-align: left;
}

.post__content .ctabox * {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.post__content .ctabox h3, .post__content .ctabox .tagline {
  margin-top: 0;
}

.post__content .ctabox p:has(>a.btn) {
  margin-top: 32px;
}

.post__content .ctabox :last-child {
  margin-bottom: 0;
}

.post__content .ctabox form input[type=email] {
  border: var(--pd-field-border);
  border-radius: var(--pd-radius-control);
  margin-bottom: 16px;
  max-width: 100%;
  padding: 12px;
  width: 100%;
}

.post__content .ctabox form input[type=email]::-ms-input-placeholder,
.post__content .ctabox form input[type=email]::-webkit-input-placeholder,
.post__content .ctabox form input[type=email]::placeholder {
  color: var(--pd-text-muted);
  opacity: 1;
}

.post__content .ctabox form input[type=submit] {
  background-color: var(--pd-berry);
  border: 1px solid var(--pd-berry);
  border-radius: var(--pd-radius-control);
  color: var(--pd-text-inverse);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--pd-fw-black);
  margin-top: 24px;
  padding: 10px 19px;
  text-decoration: none;
  transition: var(--pd-transition);
  width: 100%;
}

.post__content .ctabox form input[type=submit]:hover {
  background-color: var(--pd-navy);
  border-color: var(--pd-white);
}

.post__content .ctabox .hs-form-field label,
.post__content .ctabox .hs_error_rollup {
  color: transparent;
  display: none;
  font-size: 0;
}

.post__content .ctabox .hs-error-msgs {
  list-style: none;
}

.post__content .ctabox .hs-form-field label.hs-error-msg {
  color: var(--pd-berry);
  display: initial;
  font-size: var(--pd-fs-xs);
  line-height: var(--pd-lh-xs);
}

.post__content .ctabox .legal-consent-container {
  font-size: 11px;
  line-height: 1.25;
}

.post__content .ctabox .legal-consent-container a,
.post__content .ctabox a.btn {
  color: var(--pd-text-inverse);
}

/* ===== Post footer =====
   Share and category sit in one row, in the same font size, directly above
   the rule of the author box. */
.post__author,
.post__end {
  margin: 0 auto;
  max-width: 764px;
  width: 90%;
}

.post__end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 0 0 16px;
}

.post__endShare,
.post__endCat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: var(--pd-fs-sm);
  font-weight: var(--pd-fw-regular);
  line-height: var(--pd-lh-sm);
}

.post__endShare p {
  font-size: var(--pd-fs-sm);
  font-weight: var(--pd-fw-bold);
  line-height: var(--pd-lh-sm);
}

.post__endShare button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  margin-left: 0;
}

.post__endShare img {
  display: block;
  width: 28px;
  height: 28px;
  transition: transform .2s, opacity .2s;
}

/* The LinkedIn glyph sits smaller inside its circle than the link glyph.
   Four extra pixels make both read at the same size. */
.post__endShare .post__lnkdin img {
  width: 32px;
  height: 32px;
}

.post__endShare a:hover img,
.post__endShare button:hover img {
  transform: scale(1.12);
  opacity: .85;
}

.post__end a {
  color: var(--pd-navy);
  font-size: var(--pd-fs-sm);
  font-weight: var(--pd-fw-bold);
  line-height: var(--pd-lh-sm);
  text-decoration: none;
}

.post__end a:hover {
  color: var(--pd-berry);
}

/* Author box: image and text side by side at every width, phone included.
   The heading shares the column with name and text so all three start on the
   same line. It comes from the CSS because the template stays untouched. */
.post__author.author {
  border-top: 1px solid var(--pd-navy);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "bild info";
  column-gap: 16px;
  font-size: var(--pd-fs-md);
  line-height: var(--pd-lh-md);
  padding: 32px 0 var(--pd-space-xs);
}

.post__author.author .author__image {
  grid-area: bild;
  align-self: start;
  border-radius: var(--pd-radius-round);
  display: block;
  overflow: hidden;
  width: 72px;
  height: 72px;
  min-width: 72px;
}

.post__author.author .author__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post__author.author .author__info {
  grid-area: info;
}

.post__author.author .author__name {
  font-size: 18px;
  font-weight: var(--pd-fw-bold);
  line-height: 26px;
  margin-bottom: 6px;
}

.post__author.author .author__name::before {
  content: "Autor: ";
}

.post__author.author a {
  color: var(--pd-text);
  font-weight: var(--pd-fw-semibold);
  text-decoration: none;
}

.post__author.author a:hover {
  color: var(--pd-berry);
}

.post__content .borderbox {
  border: 2px solid var(--pd-navy);
  border-radius: var(--pd-radius-box);
  margin: 30px auto;
  max-width: 764px;
  padding: 24px;
}

.post__content .borderbox h3, .post__content .borderbox .tagline {
  margin-top: 0;
}

.post__content .borderbox :last-child {
  margin-bottom: 0;
}

/* Secondary buttons in the article (.btn--inv in the cards, any button in an infobox): navy outline, hover navy fill with
   white text, as in style.css. Berry stays for the primary call to action of the CTA box. Set here as well because the link colours of
   the article text would otherwise win. */
.post__content a.btn--inv,
.post__content button.btn--inv,
.post__content .borderbox a.btn {
  background-color: transparent;
  border-color: var(--pd-navy);
  color: var(--pd-navy);
  text-decoration: none;
}

.post__content a.btn--inv:hover,
.post__content a.btn--inv:focus-visible,
.post__content button.btn--inv:hover,
.post__content button.btn--inv:focus-visible,
.post__content .borderbox a.btn:hover,
.post__content .borderbox a.btn:focus-visible {
  background-color: var(--pd-navy);
  border-color: var(--pd-navy);
  color: var(--pd-white);
}

/* Media marker of the video and podcast card: icon in a white circle, 48 px, from 768 px 64 px. It sits on the inner
   padding of the card (24 px, from 768 px 40 px), so the markers of cards one below the other line up with each other
   and with the titles. */
.post__content .vcard__badge,
.post__content .pcard::before {
  aspect-ratio: 1;
  background: var(--pd-white) center / 66% no-repeat;
  border-radius: 50%;
  width: 48px;
}

@media (min-width: 768px) {
  .post__content .vcard__badge,
  .post__content .pcard::before {
    width: 64px;
  }
}

/* Video card: thumbnail, title and consent note in one card. The player loads after a click, see module.js. */
.post__content .vcard {
  background: var(--pd-surface-muted);
  border-radius: var(--pd-radius-box);
  box-shadow: var(--pd-shadow);
  margin: 40px auto;
  max-width: 862px;
  overflow: hidden;
}

.post__content .vcard__media {
  aspect-ratio: 16 / 9;
  background: var(--pd-navy);
  display: block;
  position: relative;
}

.post__content .vcard__media img {
  border-radius: 0;
  display: block;
  height: 100%;
  margin: 0;
  object-fit: cover;
  width: 100%;
}

.post__content .vcard__media iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Marker only: tells at a glance that this is a video. Not clickable, the button below the title loads it. */
.post__content .vcard__badge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Crect x='7' y='18' width='36' height='28' rx='6' stroke='%2303045E'/%3E%3Cpath d='M43 28l14-8v24l-14-8' stroke='%2303045E'/%3E%3Cpath d='M21 26v12l10-6z' stroke='%23E8004C'/%3E%3C/svg%3E");
  box-shadow: var(--pd-shadow);
  left: 24px;
  pointer-events: none;
  position: absolute;
  top: 24px;
}

@media (min-width: 768px) {
  .post__content .vcard__badge {
    left: 40px;
    top: 40px;
  }
}

.post__content .vcard__body {
  padding: 20px 24px 24px;
}

.post__content .vcard__title {
  margin: 0;
  max-width: none;
  padding: 0;
}

/* Tells in the title already that it is a video; set here so the articles carry only the title itself */
.post__content .vcard__title::before {
  content: "Video: ";
}

/* Consent note and the button it belongs to: side by side from 768 px, stacked below with the button as wide as its
   text, as in the podcast card */
.post__content .vcard__consent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.post__content .vcard__load {
  align-self: flex-start;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}

.post__content .vcard__note {
  color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm);
  line-height: var(--pd-lh-sm);
  margin: 0;
  max-width: none;
}

.post__content .vcard__note a {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .post__content .vcard__body {
    padding: 24px 40px 32px;
  }

  .post__content .vcard__consent {
    align-items: center;
    flex-direction: row;
    gap: 32px;
  }

  .post__content .vcard__load {
    align-self: center;
  }
}

/* Podcast card: microphone marker, title, short text and a link to the episode, in the frame of the video card, button
   on the right like there. Nothing is embedded, so no consent is needed. Below 768 px everything is stacked flush left,
   marker on top as in the video card. */
.post__content .pcard {
  align-items: center;
  background: var(--pd-surface-muted);
  border-radius: var(--pd-radius-box);
  box-shadow: var(--pd-shadow);
  display: grid;
  grid-template-areas: "icon" "title" "text" "btn";
  grid-template-columns: 1fr;
  margin: 40px auto;
  max-width: 862px;
  padding: 24px;
}

.post__content .pcard::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Crect x='24' y='10' width='16' height='28' rx='8' stroke='%2303045E'/%3E%3Cpath d='M17 30v1a15 15 0 0 0 30 0v-1M32 46v8M24 54h16' stroke='%2303045E'/%3E%3Cpath d='M10 22q-5 8 0 16M54 22q5 8 0 16' stroke='%23E8004C'/%3E%3C/svg%3E");
  content: "";
  grid-area: icon;
  margin-bottom: 16px;
}

.post__content .pcard__body {
  display: contents;
}

.post__content .pcard__title {
  grid-area: title;
  margin: 0;
  max-width: none;
  padding: 0;
}

/* Tells in the title already that it is a podcast; set here so the articles carry only the title itself */
.post__content .pcard__title::before {
  content: "Podcast: ";
}

.post__content .pcard__text {
  grid-area: text;
  margin: 16px 0 0;
  max-width: none;
}

.post__content .pcard__link {
  grid-area: btn;
  justify-self: start;
  margin-top: 16px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .post__content .pcard {
    column-gap: 24px;
    grid-template-areas: "icon title btn" "icon text btn";
    grid-template-columns: auto 1fr auto;
    padding: 24px 40px;
    row-gap: 4px;
  }

  .post__content .pcard::before {
    margin-bottom: 0;
  }

  .post__content .pcard__title {
    align-self: end;
  }

  .post__content .pcard__text {
    align-self: start;
    margin: 0;
  }

  .post__content .pcard__link {
    margin: 0 0 0 8px;
  }
}

.post__summ {
  border: 2px solid var(--pd-navy);
  border-radius: var(--pd-radius-box);
  margin: 40px auto 0;
  max-width: 764px;
  padding: 20px 24px;
  width: 90%;
}

.post__summ .post__summTitle {
  cursor: pointer;
  font-size: 16px;
  font-weight: var(--pd-fw-bold);
  line-height: 1.5;
  margin: 0;
  position: relative;
  transition: var(--pd-transition);
}

.post__summ .post__summTitle:after {
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/menu-arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--pd-transition);
  width: 24px;
}

.post__summ.active .post__summTitle:after {
  transform: translateY(-50%) rotate(180deg);
}

.post__summ .post__summTitle:hover {
  color: var(--pd-berry);
}

.post__summ .post__summTitle button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0 34px 0 0;
  text-align: left;
  width: 100%;
}

.post__summ .post__summTitle button:focus-visible {
  border-radius: var(--pd-radius-control);
  outline: 2px solid var(--pd-cyan);
  outline-offset: 6px;
}

.post__summ ul {
  display: none;
  margin-bottom: 14px;
  margin-top: 20px;
  padding-left: 24px;
}

/* Table of contents: vertical bars instead of bullets. Second-level items
   keep their bullet. */
.post__summ>ul {
  padding-left: 0;
}

.post__summ>ul>li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.post__summ>ul>li:last-child {
  margin-bottom: 0;
}

.post__summ>ul>li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 16px;
  background: var(--pd-navy);
  border-radius: var(--pd-radius-line);
}

.post__summ ul ul {
  list-style-type: disc;
}

.post__summ ul a {
  color: var(--pd-text);
  text-decoration: none;
}

.post__summ ul a:hover {
  text-decoration: underline;
}

.post__faq .container {
  padding-bottom: 64px;
  padding-top: 64px;
}

.post__faq .faq__item {
  border-radius: var(--pd-radius-control);
  margin-bottom: 24px;
}

.post__faq .faq__question {
  background-color: var(--pd-surface);
  border-radius: var(--pd-radius-control);
  cursor: pointer;
  font-weight: var(--pd-fw-bold);
  padding: 16px 88px 15px 16px;
  position: relative;
}

.post__faq .faq__question:after {
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/menu-arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 20px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--pd-transition);
  width: 20px;
}

.post__faq .faq__question.active {
  border-radius: var(--pd-radius-control) var(--pd-radius-control) 0 0;
}

.post__faq .faq__question.active:after {
  transform: translateY(-50%) rotate(180deg);
}

.post__faq .faq__answer {
  background-color: var(--pd-surface);
  border-radius: 0 0 var(--pd-radius-control) var(--pd-radius-control);
  display: none;
  padding: 16px;
}

.post__faq .faq__answer p {
  margin-bottom: 12px;
}

.post__faq .faq__answer ol,
.post__faq .faq__answer ul {
  margin-bottom: 12px;
  padding-left: 28px;
}

/* Answers may carry paragraphs and links. The last block sits flush with the
   box padding; links read like links in the article text. */
.post__faq .faq__answer > :last-child {
  margin-bottom: 0;
}

.post__faq .faq__answer a {
  color: var(--pd-text);
  transition: var(--pd-transition);
}

.post__faq .faq__answer a:hover {
  color: var(--pd-berry);
}

.post__faq .faq__item:last-child {
  margin-bottom: 0;
}

.tooltip {
  display: inline-block;
  position: relative;
}

.tooltip .tooltiptext {
  background-color: var(--pd-navy);
  border-radius: var(--pd-radius-control);
  bottom: 150%;
  color: var(--pd-text-inverse);
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  padding: 8px;
  position: absolute;
  text-align: center;
  transition: opacity .3s;
  visibility: hidden;
  width: 140px;
  z-index: 1;
}

.tooltip .tooltiptext:after {
  border: 5px solid transparent;
  border-top-color: var(--pd-navy);
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

@media (min-width:640px) {
  .tableWrap {
    overflow-x: auto
  }
  
    .post__content .ctabox,
  .post__content .borderbox {
    padding: 40px;
  }
  .post__summ {
    padding: 26px 40px;
  }
  
  .post__content .ctabox form input[type=email] {
    margin-bottom: 0;
    margin-right: 8px;
    padding: 10px 12px;
    width: 330px;
  }
  .post__content .ctabox form input[type=submit] {
    margin-top: 0;
    width: auto;
  }
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha,
  .post__content .ctabox form .hs_submit.hs-submit {
    margin-left: 0;
  }
  .post__content .ctabox form {
    align-items: start;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(5, 1fr);
  }
  .post__content .ctabox form .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha.field.hs-form-field {
    grid-column: 1/span 3;
  }
  .post__content .ctabox form .legal-consent-container {
    grid-column: 1/span 4;
  }
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha.field.hs-form-field {
    margin-top: 10px;
  }
  .post__content .ctabox form .hs_submit.hs-submit {
    align-self: start;
    grid-column: 4/6;
    grid-row: 1/span 2;
  }
}

/* Back link below the article, set apart from the author box above. */
.post__back {
  width: 90%;
  max-width: 764px;
  margin: 0 auto;
  padding: var(--pd-space-sm) 0;
}

.post__back a {
  color: var(--pd-text);
  font-weight: var(--pd-fw-bold);
  text-decoration: none;
}

.post__back a:hover {
  color: var(--pd-berry);
}

@media (min-width:768px) {
  .post__content .ctabox form .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha.field.hs-form-field {
    grid-column: 1/span 2;
  }
  .post__content .ctabox form .hs_submit.hs-submit {
    grid-column: 3/6;
  }
  .post__content .ctabox form .legal-consent-container {
    grid-column: 1/span 3;
  }
  .post__author.author {
    column-gap: 24px;
  }
  .post__author.author .author__image {
    width: 96px;
    height: 96px;
    min-width: 96px;
  }
}

@media (min-width:1024px) {
  .post__content .ctabox form .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha.field.hs-form-field {
    grid-column: 1/span 2;
  }
  .post__content .ctabox form .hs_recaptcha.hs-recaptcha.field.hs-form-field {
    grid-row: 2;
  }
  .post__content .ctabox form .hs_submit.hs-submit {
    grid-column: 3/6;
  }
  .post__content .ctabox form .legal-consent-container {
    margin-top: 12px;
  }
  .post__content .ctabox form .legal-consent-container p {
    margin-bottom: 0;
  }
  .post__faq .faq__txt {
    padding-left: 48px;
    position: relative;
    flex: 0 1 420px;
    min-width: 0;
  }
  .post__faq .content {
    display: flex;
    gap: 30px;
    justify-content: space-between;
  }
  .post__faq .container {
    padding-bottom: 120px;
    padding-top: 120px;
  }
  .post__faq .faq__box {
    min-width: 0;
    flex: 0 1 862px;
  }
}

/* Two columns from here. Both columns start from 640px and shrink together,
   the image 2.5 times as fast as the text, keeping its 16:9 ratio. Neither
   grows past 640px. Below 900px the text column gets too narrow, so the hero
   stays single column. */
@media (min-width:900px) {
  .post__hero .content {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
  .post__info {
    margin-bottom: 48px;
  }
  .post_heroTxt {
    flex:0 1 640px;
    max-width: 640px;
  }
  .post__heroImg {
    flex:0 2.5 640px;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    width: auto;
    max-width: 640px;
  }
  /* Width drives the size here, height follows from the ratio. Otherwise the
     element is taller than the graphic and the fade misses its top edge. */
  .post__hero .container:after {
    width: 56%;
    height: auto;
  }
}