/* 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: 15px;
  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 top padding keeps the content below it: 74px bar plus
   20px, and 104px from 1024px where the bar is 84px high (see below). */
.post__hero .container {
  border-radius: var(--pd-radius-box);
  overflow: hidden;
  padding: 94px 0 62px;
}

/* 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. Hyphenation rule, shared with the headings in the text:
   words from 12 characters are hyphenated, leaving at least 5 characters on
   each side, so no two-syllable word is split. */
.post__hero .content h1.gradientTitle {
  margin-top: 0;
  font-size: 40px;
  font-weight: var(--pd-fw-black);
  line-height: 48px;
  margin-bottom: 8px;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

/* 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 {
  background-position: 50% 22%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--pd-radius-box);
  height: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 640px;
}

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

.post__content h2,
.post__content h3,
.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 h4 {
  font-weight: var(--pd-fw-black);
  line-height: 1.2;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

.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 {
  margin-top: 30px;
}

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

.post__short h2,
.post__short h3,
.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__short h2 {
  font-size: var(--pd-fs-article-h2);
  line-height: var(--pd-lh-article-h2);
}

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

.post__short h3 {
  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 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-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;
}

.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: collapse;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  min-width: 600px;
}

.post__content table td,
.post__content table th {
  border: 1px solid var(--pd-navy);
  padding: 10px;
  word-break: normal;
  overflow-wrap: break-word;
}

.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 {
  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-highlight);
  border-color: var(--pd-highlight);
}

.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: red;
  display: initial;
  font-size: 11px;
}

.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-cyan);
  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-navy);
}

/* 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 56px;
}

.post__author.author .author__image {
  grid-area: bild;
  align-self: start;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
}

.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-highlight);
}

.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 {
  margin-top: 0;
}

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

.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-highlight);
}

.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;
}

.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. */
.post__back {
  width: 90%;
  max-width: 862px;
  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-highlight);
}

@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__hero .container {
    padding: 104px 0 62px;
  }
  .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;
  }
  .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: 550px;
  }
}

/* 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;
  }
}

@media (min-width:1440px) {
  .post__faq .faq__box {
    max-width: 862px;
    min-width: 862px;
  }
}