/**
 * Kaindl page-body component styles.
 *
 * Attached only when a node.page has a populated field_page_source_key,
 * i.e. content imported by the kaindl_pages module. Hand-authored basic
 * pages never load this file.
 *
 * Conventions:
 *   - All spacing / color / typography use tokens from variables.css.
 *   - Layout builds on .container, .container--narrow, .section-spacer,
 *     .grid, .grid--2, .items-center from layout.css.
 *   - No .page-body__intro exists — intro/title/kicker live in
 *     field_page_header_* and are rendered by page-header.html.twig.
 */

/* Root -------------------------------------------------------------- */

.page-body {
  color: var(--kaindl-color-text);
  font-family: var(--kaindl-font-family);
  /* Body prose matches the .page-header__intro scale (kaindl.com uses the
     same size for both). 1rem = 16px, line-height 1.55 for comfortable
     reading on long-form pages. */
  font-size: 1rem;
  line-height: 1.55;
}

/* All headings inside .page-body share a consistent scale regardless of
   which wrapper they live in (.kaindl-copy, page-body__section, etc.). */

.page-body h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.1875rem); /* 28px → 35px */
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin-bottom: clamp(1.25rem, 2vw, 2rem); /* 20 → 32px */
}

.page-body h3 {
  font-size: var(--kaindl-type-title-md);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin-top: 1.2em;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); /* 12 → 20px */
}

.page-body > * + * {
  margin-top: 0;
}

/* Section rhythm ----------------------------------------------------- */

.page-body__section {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Copy prose blocks -------------------------------------------------- */

.page-body .kaindl-copy {
  /* max-width: 45rem; */
  /* layout.css defines a base ``.kaindl-copy`` with --kaindl-type-card-text
     (~15px). For in-article prose we want the 16–18px scale set on
     ``.page-body``. Inherit explicitly to override the base rule. */
  font-size: inherit;
  line-height: inherit;
}

.page-body .kaindl-copy > * + * {
  margin-top: 1em;
  margin-bottom: 0.5rem;
}

/* Imported reference pages preserve Kaindl's Bootstrap-like row/column markup
   for text-image blocks such as "Used products". The custom theme does not
   ship Bootstrap, so provide the small subset needed to stop those columns
   stacking full-width and stretching product thumbnails. */
.page-node-type-reference .page-body .kaindl-copy .row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.page-node-type-reference .page-body .kaindl-copy .col-12 {
  grid-column: 1 / -1;
}

.page-node-type-reference .page-body .kaindl-copy .row img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

@media (min-width: 768px) {
  .page-node-type-reference .page-body .kaindl-copy .col-md-4 {
    grid-column-end: span 4;
  }

  .page-node-type-reference .page-body .kaindl-copy .col-md-6 {
    grid-column-end: span 6;
  }

  .page-node-type-reference .page-body .kaindl-copy .offset-md-1 {
    grid-column-start: 2;
  }

  .page-node-type-reference .page-body .kaindl-copy .d-md-flex {
    display: flex;
  }

  .page-node-type-reference .page-body .kaindl-copy .justify-content-md-end {
    justify-content: flex-end;
  }

  .page-node-type-reference .page-body .kaindl-copy .align-items-md-end {
    align-items: flex-end;
  }
}

@media (min-width: 1200px) {
  .page-node-type-reference .page-body .kaindl-copy .col-xl-3 {
    grid-column-end: span 3;
  }

  .page-node-type-reference .page-body .kaindl-copy .col-xl-5 {
    grid-column-end: span 5;
  }

  .page-node-type-reference .page-body .kaindl-copy .offset-xl-2 {
    grid-column-start: 3;
  }
}

@media (min-width: 1440px) {
  .page-node-type-reference .page-body .kaindl-copy .col-xxl-2 {
    grid-column-end: span 2;
  }

  .page-node-type-reference .page-body .kaindl-copy .col-xxl-4 {
    grid-column-end: span 4;
  }

  .page-node-type-reference .page-body .kaindl-copy .offset-xxl-3 {
    grid-column-start: 4;
  }
}

/* Reference detail: project information + used products ------------- */

/* Match the centered Bootstrap column used by the legacy reference detail
   pages while leaving the surrounding sections full-width. */
.page-node-type-reference {
  --reference-detail-content-width: min(100%, calc(100vw - 40px));
}

.page-node-type-reference
  .page-body__section:has(> .page-body__feature-list)
  > h2,
.page-node-type-reference
  .page-body__section:has(> .page-body__feature-list)
  > .page-body__feature-list,
.page-node-type-reference .page-body__section > .references-products {
  box-sizing: border-box;
  width: var(--reference-detail-content-width);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .page-node-type-reference {
    --reference-detail-content-width: min(100%, calc(83.333333vw - 30px));
  }
}

@media (min-width: 1280px) {
  .page-node-type-reference {
    --reference-detail-content-width: min(100%, calc(66.666667vw - 30px));
  }
}

@media (min-width: 1920px) {
  .page-node-type-reference {
    --reference-detail-content-width: min(100%, calc(50vw - 30px));
  }
}

.page-node-type-reference .references-products__headline {
  margin: 0 0 0.5rem;
}

.page-node-type-reference .references-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-content: start;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

@media (max-width: 32rem) {
  .page-node-type-reference .references-products__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-node-type-reference .references-products__item {
  display: grid;
  gap: 0.85rem;
  color: var(--kaindl-color-text);
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-tight);
  text-decoration: none;
}

.page-node-type-reference .references-products__media {
  margin: 0;
}

.page-node-type-reference .references-products__image {
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.page-node-type-reference .references-products__meta {
  display: grid;
  gap: 0.15rem;
}

.page-node-type-reference .references-products__code {
  display: block;
  font-weight: 700;
}

.page-node-type-reference .references-products__name {
  display: block;
}

.page-node-type-reference .references-products__collection {
  display: block;
  color: var(--kaindl-color-muted);
  font-size: 0.9em;
}

/* (h2/h3 sizing + spacing lives at the .page-body scope above so it applies
   to headings outside .kaindl-copy too — feature-list-section, faq, etc.) */

.page-body .kaindl-copy a:not(.btn) {
  color: var(--kaindl-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.page-body .kaindl-copy a:not(.btn):hover,
.page-body .kaindl-copy a:not(.btn):focus-visible {
  color: var(--kaindl-color-primary-hover);
}

/* Prose lists — replace the default disc bullet with a compact rotated
   square ("diamond" look). Scoped so it doesn't touch the styled list
   components (.page-body__feature-list / __testimonials / __downloads /
   __gallery / __product-grid / __stat-grid / responsibility-members). */
.page-body .kaindl-copy ul,
.page-body .kaindl-copy ol,
.page-body ul:not([class]),
.page-body ol:not([class]),
.page-body__responsibility-members__group > ul {
  padding-left: 1.35em;
  list-style: none;
  margin: 0;
}

.page-body .kaindl-copy ul > li,
.page-body ul:not([class]) > li,
.page-body__responsibility-members__group > ul > li {
  position: relative;
}

.page-body .kaindl-copy ul > li::before,
.page-body ul:not([class]) > li::before,
.page-body__responsibility-members__group > ul > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 0.55em;
  width: 0.4375rem; /* 7px */
  height: 0.4375rem; /* 7px */
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Numbered prose lists keep their default numeric markers. */
.page-body .kaindl-copy ol > li::before,
.page-body ol:not([class]) > li::before {
  content: none;
}

.page-body .kaindl-copy ol,
.page-body ol:not([class]) {
  list-style: decimal;
  padding-left: 1.5em;
}

/* Compact spacing between prose list items. */
.page-body .kaindl-copy li + li,
.page-body ul:not([class]) li + li,
.page-body ol:not([class]) li + li,
.page-body__responsibility-members__group > ul li + li {
  margin-top: 0.25em;
}

.page-body .kaindl-copy a:not(.btn):focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anchor buttons inside body prose: the theme's layout.css already styles
   ``.btn`` / ``.btn--primary`` / ``.btn--secondary`` (black-bg pill with white
   text, etc.). Prose-inherited font-size is fine; block them out so they
   don't inline next to a paragraph and wear some button-specific spacing. */
.page-body .kaindl-copy a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2em;
}

.page-body .kaindl-copy > h2:first-child,
.page-body .kaindl-copy > h3:first-child {
  margin-top: 0;
}

/* Two-column text + media ------------------------------------------- */

.page-body__two-col {
  /* Override the theme's .grid--2 fixed two-column layout so the grid
     auto-collapses to a single column below ~720px viewport. min(320px, 100%)
     keeps the min-col width from overflowing viewports narrower than 320px. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}

/* Copy + CTA variant — no image, button sits in the right column at desktop
   (mirrors kaindl.com's "Regional and sustainable energy production" layout)
   and drops below the copy on mobile. */
.page-body__two-col--cta {
  align-items: start;
}

.page-body__two-col__cta {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .page-body__two-col--cta {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .page-body__two-col__cta {
    justify-content: flex-end;
    padding-top: 0.5rem;
    margin-top: auto;
  }
}

/* Aside variant — wide main column paired with a narrow sidebar for a
   pull-quote / expert tip. Main column sits on the left, aside on the
   right at desktop; they stack (main first, aside below) on mobile. */
.page-body__two-col--aside {
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.page-body__two-col--aside .page-body__two-col__main {
  min-width: 0;
}

/* Main-column h2 sits at the very top of its column — reset the global
   h2 margin-top; base .page-body h2 supplies the margin-bottom. */
.page-body__two-col--aside .page-body__two-col__main > h2:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .page-body__two-col--aside {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Responsibility members list — a full-width block appended below a
   two-col section. Heading (`<strong>`) + bulleted list of institutions
   spread across the full container. Lives at the tail of
   `.page-body__section`, so the section's flex-column gap provides the
   vertical rhythm above it. */
.page-body__responsibility-members {
  width: 100%;
  padding-top: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 768px) {
  .page-body__responsibility-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__responsibility-members__group > p {
  margin: 0 0 clamp(0.5rem, 1vw, 0.875rem);
  font-weight: 700;
}

.page-body__responsibility-members__group > ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0;
}

.page-body__responsibility-members__group > ul li {
  margin: 0 0 0.5em;
}

/* Keep this photograph independent from the height of its adjacent policy. */
.page-body--responsibility .page-body__two-col--photo > .page-body__media {
  align-self: center;
  height: auto;
  justify-self: center;
  max-width: 22.6667rem;
  overflow: hidden;
  width: 100%;
}

.page-body--responsibility .page-body__two-col--photo > .page-body__media > img {
  height: auto;
  max-height: none;
  object-fit: cover;
  width: 100%;
}

/* Responsibility page parity with the legacy text-image content sequence. */
.page-body--responsibility .page-body__responsibility-intro,
.page-body--responsibility .page-body__responsibility-centered-copy {
  margin-inline: auto;
  max-width: 64rem;
  width: 100%;
}

.page-body--responsibility .page-body__responsibility-principles {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
}

.page-body--responsibility .page-body__responsibility-principle > h3,
.page-body--responsibility .page-body__responsibility-members__group > h3 {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 0.35rem;
}

.page-body--responsibility .page-body__responsibility-principle > p {
  margin: 0;
}

.page-body--responsibility .page-body__responsibility-nature {
  align-items: end;
}

.page-body--responsibility .page-body__responsibility-wide-media {
  margin: 0 auto clamp(2rem, 4vw, 4rem);
  max-width: 80rem;
  overflow: hidden;
  width: 100%;
}

.page-body--responsibility .page-body__responsibility-wide-media > img {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.page-body--responsibility .page-body__responsibility-members {
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body--responsibility .page-body__responsibility-members__group + .page-body__responsibility-members__group {
  margin-top: clamp(0.5rem, 1vw, 1rem);
}

@media (min-width: 768px) {
  .page-body--responsibility .page-body__responsibility-nature {
    grid-template-columns: minmax(0, 5fr) minmax(15rem, 3fr);
  }
}

/* Tip block — a designed aside card (expert tip / pull-quote). Not the
   Swiper-driven `.page-body__testimonials`; this is a single static
   callout styled for sidebar placement. Uses the global kaindl font
   family (no serif substitution). */
.page-body__tip {
  --tip-bg: #f5f5f5;
  --tip-accent: var(--kaindl-color-primary, #111);
  --tip-rule: rgba(17, 17, 17, 0.12);
  --tip-meta: #6b6b6b;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.25vw, 1rem);
  padding: clamp(1.5rem, 2.25vw, 2.25rem);
  background: var(--tip-bg);
  isolation: isolate;
  box-sizing: border-box;
}

/* Left-edge accent bar — a single vertical rule in the kaindl primary
   color to anchor the tip box without a heavy border or shadow. */
.page-body__tip::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.25rem, 2vw, 1.75rem);
  bottom: clamp(1.25rem, 2vw, 1.75rem);
  width: 2px;
  background: var(--tip-accent);
}

.page-body__tip__eyebrow {
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tip-accent);
}

.page-body__tip__quote {
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 */
  line-height: 1.6;
  color: var(--kaindl-color-text);
  font-style: normal;
}

.page-body__tip__quote p {
  margin: 0;
}

.page-body__tip__quote p + p {
  margin-top: 0.75em;
}

.page-body__tip__attribution {
  padding-top: clamp(0.5rem, 1vw, 0.75rem);
  border-top: 1px solid var(--tip-rule);
  font-size: 0.8125rem; /* 13px */
  color: var(--tip-meta);
  letter-spacing: 0.01em;
}

/* Photo variant — photographic images (not diagrams).

/* Photo variant — photographic images (not diagrams). Image stretches the
   full card height, rounded corners + subtle shadow for polish. Copy column
   sits in a generous padded panel. Alternates via --flip so every other
   photo section swaps which side the image is on. */
.page-body__two-col--photo {
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.page-body__two-col--photo > .kaindl-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}

.page-body__two-col--photo > figure.page-body__media {
  margin: 0;
  height: 100%;
  /* No min/max height cap — `align-items: stretch` matches the figure to
     the copy column's intrinsic height, so short-copy sections stay
     compact and tall-copy sections fill the row naturally. */
  overflow: hidden;
  box-shadow:
    0 0.5rem 1.5rem rgba(17, 17, 17, 0.08),
    0 0.125rem 0.375rem rgba(17, 17, 17, 0.04);
}

.page-body__two-col--photo > figure.page-body__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .page-body__two-col--photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .page-body__two-col--photo.page-body__two-col--flip {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .page-body__two-col--photo.page-body__two-col--flip > .kaindl-copy {
    order: 2;
  }
  .page-body__two-col--photo.page-body__two-col--flip
    > figure.page-body__media {
    order: 1;
  }
}

/* Portrait variant — for pages where the source image is intrinsically
   small (e.g. 320px headshots). Keeps the figure column narrow so the image
   renders at native resolution instead of upscaling and going blurry. */
.page-body__two-col--portrait {
  align-items: center;
}

.page-body__two-col--portrait > figure.page-body__media {
  margin: 0;
  max-width: 20rem;
  overflow: hidden;
  box-shadow: none;
  height: auto;
  min-height: 0;
}

.page-body__two-col--portrait > figure.page-body__media img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .page-body__two-col--portrait {
    grid-template-columns: minmax(20rem, 1fr) minmax(0, 20rem);
  }
  .page-body__two-col--portrait.page-body__two-col--flip {
    grid-template-columns: minmax(0, 20rem) minmax(20rem, 1fr);
  }
  .page-body__two-col--portrait.page-body__two-col--flip > .kaindl-copy {
    order: 2;
  }
  .page-body__two-col--portrait.page-body__two-col--flip
    > figure.page-body__media {
    order: 1;
  }
}

/* Media-top variant — mirrors old kaindl.com text-image-content sections
   with a long copy column (e.g. /entitaet/ "Interne Links"): equal columns,
   image top-aligned beside the heading on the right at desktop, image above
   the copy on mobile (old site's order-1 order-sm-2). */
.page-body__two-col--media-top {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.page-body__two-col--media-top > figure.page-body__media {
  margin: 0;
}

.page-body__two-col--media-top > figure.page-body__media img {
  height: auto;
  object-fit: contain;
}

.page-body__two-col--media-top > .kaindl-copy > h2:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .page-body__two-col--media-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-body__two-col--media-top > .kaindl-copy {
    order: 1;
  }
  .page-body__two-col--media-top > figure.page-body__media {
    order: 2;
  }
}

/* Teaser banner (page-body final CTA block) — centered heading, body, button. */
.page-body__teaser-banner {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.page-body__teaser-banner__headline {
  font-size: var(--kaindl-type-title-lg);
  line-height: var(--kaindl-leading-tight);
  font-weight: 700;
  margin: 0;
}

.page-body__teaser-banner__text p {
  margin: 0;
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-body, #555);
}

.page-body__teaser-banner__cta {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Full-width legacy CTA banners transformed by the listing-body generator. */
.page-body__section--teaser-banner {
  align-items: center;
  background: #f5f5f5;
  margin-top: clamp(2.5rem, 4vw, 3.75rem);
  padding: clamp(3rem, 5vw, 4.375rem) var(--kaindl-gutter);
  text-align: center;
}

.page-body .page-body__section--teaser-banner .page-body__teaser-banner {
  gap: 0;
  padding-block: 0;
  width: 100%;
}

.page-body .page-body__section--teaser-banner .page-body__teaser-banner__headline {
  font-size: clamp(1.5rem, 1.2rem + 0.5vw, 1.65rem);
  line-height: 1.2;
  margin: 0;
}

.page-body .page-body__section--teaser-banner .page-body__teaser-banner__cta {
  margin-top: clamp(1.25rem, 2vw, 1.875rem);
}

.page-body__section--teaser-banner .btn--primary {
  --btn-bg: #111;
  --btn-border: #111;
  --btn-color: #fff;
  --btn-hover-bg: #fff;
  --btn-hover-border: #111;
  --btn-hover-color: #111;
}
/* ES/IT sustainability parity. The legacy report block retains TYPO3's
   Bootstrap grid classes, while these translations intentionally use the
   old image-first-on-mobile and offset two-column desktop layout. */
.page-body--sustainability-es-it
  > .page-body__section:first-child {
  box-sizing: border-box;
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.page-body--sustainability-es-it
  > .page-body__section:first-child
  > .kaindl-copy,
.page-body--sustainability-es-it
  .text-image-content .container-fluid {
  box-sizing: border-box;
  width: 100%;
}

.page-body--sustainability-es-it
  .text-image-content .container-fluid {
  padding-inline: 15px;
}

.page-body--sustainability-es-it
  .text-image-content .row {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: -15px;
}

.page-body--sustainability-es-it
  .text-image-content [class*="col-"] {
  box-sizing: border-box;
  grid-column: 1 / -1;
  min-width: 0;
  padding-inline: 15px;
}

.page-body--sustainability-es-it
  .text-image-content .order-1 {
  grid-row: 1;
}

.page-body--sustainability-es-it
  .text-image-content .order-2 {
  grid-row: 2;
}

.page-body--sustainability-es-it
  .text-image-content__image {
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.page-body--sustainability-es-it
  .text-image-content__image img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--sustainability-es-it
  .text-image-content__headline {
  margin-top: 0;
}

/* The grey background spans the viewport; its existing inner banner keeps
   the old centered copy width. */
.page-body--sustainability-es-it
  > .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

@media (min-width: 576px) {
  .page-body--sustainability-es-it
    .text-image-content .order-2.order-sm-1 {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .page-body--sustainability-es-it
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .page-body--sustainability-es-it
    .text-image-content__image {
    margin-bottom: 0;
  }
}

/* Healthy-living old-site parity. The image precedes the copy on narrow
   screens, while the standards CTA aligns with the bottom of its copy at
   desktop. The selectors are limited to the repaired ES/IT article class. */
@media (max-width: 767.98px) {
  .page-body--healthy-living
    .page-body__healthy-air
    .page-body__two-col--media-top
    > figure.page-body__media {
    order: -1;
  }
}

@media (min-width: 768px) {
  .page-body--healthy-living
    .page-body__healthy-standards
    .page-body__two-col--cta {
    align-items: end;
  }

  .page-body--healthy-living
    .page-body__healthy-standards
    .page-body__two-col--cta
    > .kaindl-copy {
    align-self: start;
  }
}

/* Underfloor-heating old-site parity. The CTA background breaks out of the
   article container, while its content keeps the canonical centered width. */
.page-body--underfloor-heating > .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}
/* Apprenticeships parity: the legacy career-application CTA uses a viewport-
   wide grey band while its heading, copy, and button remain centered. */
.page-body--apprenticeships-parity > .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

/* A single compact testimonial is not initialized as a Swiper. Keep the
   no-JS grid at one column at every breakpoint and let its card fill it. */
.page-body--underfloor-heating
  .page-body__section--underfloor-testimonial
  .page-body__testimonials:not(.swiper-wrapper) {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.page-body--underfloor-heating
  .page-body__section--underfloor-testimonial
  .page-body__testimonials
  > li {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

.page-body--underfloor-heating
  .page-body__section--underfloor-testimonial
  .page-body__testimonials
  blockquote {
  max-width: none;
  width: 100%;
}

/* Responsive virtual tour, isolated to the Design Center page variant. */
.page-body--design-center .iframe-container--16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.page-body--design-center .iframe-container--16-9 .iframe {
  border: 0;
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* BOARDS collection LEAD 2022 old-site parity. Scoped to the explicit
   campaign variant so other imported pages retain their native layout. */
.page-body--boards-lead-2022 .kaindl-copy > * + * {
  margin-top: 0;
}

.page-body--boards-lead-2022 .page-body__two-col--lead .btn {
  margin: 20px 0 0;
}

.page-body--boards-lead-2022 {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 200;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.page-body--boards-lead-2022 > .section-spacer {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 917px;
  width: calc(100% - (2 * var(--kaindl-gutter)));
}

.page-body--boards-lead-2022 h2 {
  font-size: 26.3711px;
  line-height: 1.2;
  margin: 0 0 13.1856px;
}

.page-body--boards-lead-2022 .page-body__section--teaser-banner
  .page-body__teaser-banner__headline {
  font-size: 26.3711px;
  line-height: 1.2;
  margin-bottom: 13.1856px;
}

.page-body--boards-lead-2022 .page-body__media {
  overflow: hidden;
}

.page-body--boards-lead-2022 .page-body__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.page-body--boards-lead-2022 .page-body__section--lead-intro,
.page-body--boards-lead-2022 > .page-body__section.section-spacer {
  padding-block: 60px;
}

.page-body--boards-lead-2022 .page-body__media--lead {
  aspect-ratio: 917 / 516;
  margin: 0;
}

.page-body--boards-lead-2022 .page-body__lead-copy {
  display: grid;
  gap: 29px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  margin-top: 30px;
}

.page-body--boards-lead-2022 .page-body__lead-cta {
  align-items: flex-end;
  display: flex;
}

.page-body--boards-lead-2022 .page-body__two-col--lead {
  align-items: start;
  gap: 29px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-body--boards-lead-2022 .page-body__two-col--lead > .page-body__media {
  aspect-ratio: 1;
  margin: 0;
  order: 2;
}

.page-body--boards-lead-2022 .page-body__two-col--lead > .kaindl-copy {
  order: 1;
}

.page-body--boards-lead-2022 .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  margin-top: 60px;
  padding-block: 70px;
  width: 100vw;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  padding-block: 50px;
  width: 100vw;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__layout {
  max-width: 1241px;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__media {
  width: min(74.3%, 922px);
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__body {
  margin-top: -160px;
  max-width: 763px;
  width: 61.5%;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box {
  min-height: 322px;
  padding: 100px;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box-headline {
  font-size: 40.2219px;
  line-height: 1.2;
}

.page-body--boards-lead-2022 .btn {
  font-size: 11px;
  min-height: 44px;
  padding-inline: 15.4px;
}

.page-body--boards-lead-2022 .btn--secondary {
  padding-inline: 20px;
}

.page-body--boards-lead-2022 .btn--primary,
.page-body--boards-lead-2022 .collection-teaser__box-cta {
  padding-inline: 6.5px;
}

.page-body--boards-lead-2022 .page-body__section--lead-intro .formatted-text p {
  margin: 0 0 1.5em;
}

.page-body--boards-lead-2022
  .page-body__section--lead-intro
  .formatted-text
  p:last-child {
  margin-bottom: 0;
}

.page-body--boards-lead-2022 .page-body__lead-copy > .kaindl-copy {
  padding-bottom: 12px;
}

.page-body--boards-lead-2022
  .page-body__two-col--lead
  .kaindl-copy
  > .formatted-text {
  margin-bottom: 0;
}

.page-body--boards-lead-2022 .page-body__two-col--lead .kaindl-copy > .btn {
  margin: 20px 0 0;
}

.page-body--boards-lead-2022 .page-body__two-col--lead .btn--secondary {
  padding-inline: 16.2px;
}

.page-body--boards-lead-2022
  .page-body__section--teaser-banner:last-child
  .page-body__teaser-banner__headline {
  margin-bottom: 10px;
}

.page-body--boards-lead-2022 .page-body__teaser-banner__text p,
.page-body--boards-lead-2022
  .collection-teaser--boards-lead
  .collection-teaser__box-text
  p {
  font-size: inherit;
  line-height: inherit;
}

.page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box-headline {
  margin-bottom: 8px;
}

.page-body--boards-lead-2022
  .page-body__section--teaser-banner:not(:last-child) {
  margin-bottom: 60px;
}

.page-body--boards-lead-2022
  .collection-teaser--boards-lead
  .collection-teaser__body {
  margin-bottom: -20px;
}

.page-body--boards-lead-2022
  .collection-teaser--boards-lead
  .collection-teaser__box-text {
  margin-top: 0;
}

@media (min-width: 1025px) {
  .page-body--boards-lead-2022 .page-body__lead-copy > .kaindl-copy {
      padding-bottom: 0;
    }

  .page-body--boards-lead-2022
      .page-body__lead-copy
      .kaindl-copy
      > .formatted-text {
      margin-bottom: 0;
    }

  .page-body--boards-lead-2022
      .page-body__teaser-banner__text
      + .page-body__teaser-banner__cta {
      margin-top: 40px;
    }

  .page-body--boards-lead-2022
      .collection-teaser--boards-lead
      .collection-teaser__box {
      padding: 100px 160px;
    }

  .page-body--boards-lead-2022 .page-body__lead-cta {
      justify-content: flex-end;
    }

  .page-body--boards-lead-2022 .page-body__two-col--lead .kaindl-copy > .btn {
      margin-top: 40px;
    }
}

@media (max-width: 767px) {
  .page-body--boards-lead-2022 {
      font-size: 13px;
      line-height: 1.7;
    }

  .page-body--boards-lead-2022 > .section-spacer {
      margin-inline: 13px;
      padding-block: 30px;
      width: calc(100% - 26px);
    }

  .page-body--boards-lead-2022 h2 {
      font-size: 18px;
      line-height: 1.2;
      margin-bottom: 9px;
    }

  .page-body--boards-lead-2022 .page-body__section--teaser-banner
      .page-body__teaser-banner__headline {
      font-size: 18px;
      margin-bottom: 9px;
    }

  .page-body--boards-lead-2022 .page-body__lead-copy,
    .page-body--boards-lead-2022 .page-body__two-col--lead {
      gap: 0;

      grid-template-columns: 1fr;
    }

  .page-body--boards-lead-2022 .page-body__lead-copy {
      margin-top: 20px;
    }

  .page-body--boards-lead-2022 .page-body__two-col--lead > .page-body__media {
      margin-bottom: 20px;
      order: -1;
    }

  .page-body--boards-lead-2022 > .page-body__section.section-spacer {
      padding-block: 30px;
    }

  .page-body--boards-lead-2022 .page-body__section--teaser-banner {
      margin-inline: calc(50% - 50vw);
      margin-top: 30px;
      padding: 50px 15px;
    }

  .page-body--boards-lead-2022 .collection-teaser--boards-lead {
      margin-inline: calc(50% - 50vw);
      padding: 15px;
    }

  .page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__media,
    .page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__body {
      margin-top: 0;
      max-width: none;
      width: 100%;
    }

  .page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box {
      min-height: 0;
      padding: 50px 0 0;
    }

  .page-body--boards-lead-2022
      .collection-teaser--boards-lead
      .collection-teaser__body {
      margin-top: 20px;
    }

  .page-body--boards-lead-2022
      .collection-teaser--boards-lead
      .collection-teaser__box {
      margin-left: -15px;
      padding: 30px 15px;
      width: calc(100% + 30px);
    }

  .page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box-cta {
      margin-top: 20px;
    }

  .page-body--boards-lead-2022 .collection-teaser--boards-lead .collection-teaser__box-headline {
      font-size: 20px;
      line-height: 1.2;
    }

  .page-body--boards-lead-2022
      .page-body__section--teaser-banner:last-child
      .page-body__teaser-banner__headline {
      margin-bottom: 0;
    }

  .page-body--boards-lead-2022 .btn {
      height: 44px;
      min-height: 44px;
    }

  .page-body--boards-lead-2022
      .page-body__section--teaser-banner:not(:last-child) {
      margin-bottom: 30px;
    }

  .page-body--boards-lead-2022
      .collection-teaser--boards-lead
      .collection-teaser__body {
      margin-bottom: -20px;
    }

  .page-body--boards-lead-2022
      .collection-teaser--boards-lead
      .collection-teaser__box-text {
      margin-top: 0;
    }
}

/* Media figures sitting inside a two-col grid: clamp height so a tall
   portrait image doesn't blow the row height on a narrow column. */
.page-body__two-col > figure.page-body__media img {
  object-fit: cover;
}

.page-body__media {
  margin: 0;
}

.page-body__media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-body__media figcaption {
  font-size: var(--kaindl-type-card-text);
  color: var(--kaindl-color-accent);
  margin-top: 0.5em;
}

/* Product grid — used on reference case studies for "Used products".
   Card shows a square thumbnail + code + decor name; scales to 2 or 3 columns. */

.page-body__product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .page-body__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Corrected component markup imported by the Entity/FLOORING parity CLI. */
.page-source--entity .page-body--entity-parity .kaindl-copy p {
  margin: 0 0 20px;
}

.page-source--entity .page-body--entity-parity .kaindl-copy h3 {
  margin: 0 0 8px;
}

.page-source--entity
  .page-body--entity-parity
  .kaindl-copy h3:not(:first-child) {
  margin-top: 24px;
}

.page-body--entity-parity__central,
.page-body--entity-parity__relations,
.page-body--entity-parity__summary {
  margin-inline: auto;
  width: 100%;
}

.page-body--entity-parity__wide-media .page-body__media {
  width: 100%;
}

.page-body--entity-parity__wide-media .page-body__media img,
.page-body--entity-parity
  .page-body__two-col
  > .page-body__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-source--entity
  .page-body--entity-parity
  .page-body--entity-parity__faq > h2 {
  font-size: clamp(1.75rem, 1.55rem + 0.55vw, 2.165rem);
  margin-bottom: 1.5em;
}

.page-source--entity
  .page-body--entity-parity
  .page-body__faq-item > summary h3 {
  font-size: clamp(0.95rem, 0.9rem + 0.12vw, 1.055rem);
  margin: 0;
}

.page-body--flooring-2025-parity__text-image .page-body__two-col {
  align-items: start;
}

.page-source--flooring-collection-2025
  .page-body--flooring-2025-parity
  .page-body__teaser-banner {
  max-width: 27.875rem;
  padding-block: 0;
}

.page-source--flooring-collection-2025
  .page-body--flooring-2025-parity
  .page-body__teaser-banner__headline {
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.65rem);
}

.page-body--flooring-2025-parity__collection {
  left: 50%;
  margin-block: 60px;
  position: relative;
  transform: translateX(-50%);
  width: min(calc(100vw - 2rem), 72.5rem);
}

.page-body--flooring-2025-parity__downloads {
  margin-inline: auto;
  width: 100%;
}

.page-source--flooring-collection-2025
  .page-body--flooring-2025-parity__downloads > h2 {
  font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.75rem);
  margin-bottom: 2em;
}

@media (min-width: 1280px) {
  .page-body--flooring-2025-parity__collection
    .collection-teaser__layout {
    max-width: 65rem;
  }

  .page-body--flooring-2025-parity__collection
    .collection-teaser__media {
    width: min(80%, 57.5625rem);
  }

  .page-body--flooring-2025-parity__collection
    .collection-teaser__body {
    margin-top: -5.375rem;
    width: min(43%, 27.75rem);
  }

  .page-body--flooring-2025-parity__collection
    .collection-teaser__box {
    min-height: 0;
    padding: 3.75rem;
  }
}

@media (max-width: 767px) {
  .page-body--flooring-2025-parity__collection {
    margin-block: 30px;
  }
}

@media (min-width: 960px) {
  .page-body__product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-body__product-grid__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.page-body__product-grid__card:hover,
.page-body__product-grid__card:focus-visible {
  transform: translateY(-2px);
}

.page-body__product-grid__image {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.page-body__product-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-body__product-grid__code {
  font-weight: 700;
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-tight);
  color: var(--kaindl-color-text);
  margin: 0;
}

.page-body__product-grid__name {
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-body, #555);
  margin: 0;
}

/* Grouped product grid — used when kaindl.com groups product cards under
   sub-headings (e.g. formex-village: External walls / Roof / Internal walls
   / Tree trunks). */
.page-body__product-grid-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body__product-grid-group > h3 {
  /* Sits at top of a group — reset margin-top; base .page-body h3 supplies
     margin-bottom and the rest of the typographic styles. */
  margin-top: 0;
}

/* Stat grid — big-number cards with count-up animation on scroll.
   Used on /en/company/facts-and-figures/. Each tile is a solid dark
   panel with a huge white value and a small caption beneath. The
   value element carries `data-stat-value` (and optional
   `data-stat-suffix`) which the stat-counter behavior animates from
   0 → target on enter-viewport. */

.page-body__stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .page-body__stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-body__stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-body__stat-grid__item {
  position: relative;
  background: var(--kaindl-color-primary, #111);
  color: #fff;
  aspect-ratio: 7 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 2vw, 2rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
}

.page-body__stat-grid__value {
  font-size: clamp(2.5rem, 2rem + 2vw, 4.5rem); /* 40 → 72 */
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  /* tabular-nums avoids horizontal jitter while the digits animate. */
  font-variant-numeric: tabular-nums;
}

.page-body__stat-grid__label {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  max-width: 22ch;
}

/* Scope navigation — local page-family tabs, e.g. careers subpages. */
.page-body__scope-nav-block {
  width: min(100%, 50rem);
  margin-inline: auto;
}

.page-body__scope-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 3.75rem);
  row-gap: 1.2rem;
  margin: 0;
  padding: 0 0 1rem 0;
  list-style: none;
  border-bottom: 2px solid
    color-mix(in srgb, var(--kaindl-color-text, #1f1f1f) 34%, transparent);
}

.page-body__scope-nav-item {
  margin: 0;
}

.page-body__scope-nav-link {
  position: relative;
  display: block;
  padding: 0 0 0.5rem;
  color: color-mix(in srgb, var(--kaindl-color-text, #1f1f1f) 48%, transparent);
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  line-height: 1.25;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.page-body__scope-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: transparent;
}

.page-body__scope-nav-link:hover,
.page-body__scope-nav-link:focus-visible,
.page-body__scope-nav-item.is-active .page-body__scope-nav-link {
  color: var(--kaindl-color-text, #1f1f1f);
}

.page-body__scope-nav-item.is-active .page-body__scope-nav-link::after {
  background: currentColor;
}

.page-body__scope-nav-intro {
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  text-align: center;
}

.page-body__scope-nav-intro p {
  margin-inline: auto;
}

/* Contact person cards ------------------------------------------------ */
.page-body__contact-persons > h2 {
  /* Sits at top of the section — reset margin-top; base .page-body h2
     supplies margin-bottom and typographic styles. */
  margin-top: 0;
}

.page-body__contact-persons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 720px) {
  .page-body__contact-persons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__contact-card {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
}

.page-body__contact-card-media {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--kaindl-color-muted, #f4f4f4);
}

.page-body__contact-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-body__contact-card-name {
  margin: 0 0 0.45rem;
  font-size: clamp(1.1875rem, 1.08rem + 0.4vw, 1.4375rem);
  line-height: 1.25;
  font-weight: 800;
}

.page-body__contact-card-body p {
  margin: 0.25rem 0 0;
  line-height: 1.45;
}

.page-body__contact-card-body a {
  font-weight: 700;
}

/* Feature list (replaces .rich-bullet-list) ------------------------- */

/* Section holding a feature-list: heading margin is already handled by
   the parent `.page-body__section`'s flex-column gap. The section-spacer
   rhythm between sections gives downstream breathing room. */

.page-body__feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .page-body__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.page-body__feature-list__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--kaindl-gutter);
  align-items: start;
}

.page-body__feature-list__icon {
  width: 3rem;
  height: 3rem;
  color: var(--kaindl-color-primary);
  flex: none;
}

.page-body__feature-list__icon > svg,
.page-body__feature-list__icon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Apprenticeship dates mirror the legacy rich-bullet-list: the 60px badge
   occupies the full visual height of the date and its description. */
.page-body--apprenticeships-parity
  .page-body__feature-list--apprenticeship-dates
  .page-body__feature-list__item {
  align-items: center;
  column-gap: 1.25rem;
  grid-template-columns: 3.75rem minmax(0, 1fr);
}

.page-body--apprenticeships-parity
  .page-body__feature-list--apprenticeship-dates
  .page-body__feature-list__icon {
  height: 3.75rem;
  width: 3.75rem;
}

.page-body--apprenticeships-parity
  .page-body__feature-list--apprenticeship-dates
  .page-body__feature-list__body > h3 {
  margin: 0 0 0.25rem;
}

.page-body--apprenticeships-parity
  .page-body__feature-list--apprenticeship-dates
  .page-body__feature-list__body > p {
  margin: 0;
}

/* Drupal's filtered-text formatter may wrap a standalone reference icon in a
   paragraph. Keep that generated wrapper inside the intended 3rem icon cell. */
.page-node-type-reference .page-body__feature-list__item > p:has(> .page-body__feature-list__icon) {
  width: 3rem;
  height: 3rem;
  margin: 0;
  line-height: 0;
}

/* Numbered variant — events lists use a solid black square with a white
   digit where the icon would normally sit. The number is generated via a
   CSS counter on the list, so the markup stays clean. */
.page-body__feature-list--numbered {
  counter-reset: feature-number;
}

.page-body__feature-list--numbered .page-body__feature-list__item {
  counter-increment: feature-number;
  grid-template-columns: 3rem 1fr;
  align-items: start;
}

.page-body__feature-list--numbered
  .page-body__feature-list__item
  > .page-body__feature-list__body {
  padding-top: 0.25rem;
}

.page-body__feature-list--numbered .page-body__feature-list__item::before {
  content: counter(feature-number);
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 3rem;
  height: 3rem;
  background: var(--kaindl-color-primary, #111);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

/* Event body: tighter hierarchy than the generic feature-list body. */
.page-body__feature-list--numbered .page-body__feature-list__body > h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  line-height: 1.25;
  font-weight: 700;
}

.page-body__feature-list--numbered .page-body__feature-list__body > h4 {
  margin: 0.4em 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--kaindl-color-text);
}

.page-body__feature-list--numbered .page-body__feature-list__body > p {
  margin: 0.25em 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6b6b6b;
}

.page-body__feature-list--numbered .page-body__feature-list__body > p a {
  color: var(--kaindl-color-primary, #111);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  word-break: break-word;
}

.page-body__feature-list--numbered .page-body__feature-list__body > p a:hover {
  text-decoration-thickness: 2px;
}

.page-body__feature-list__body > :first-child {
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin: 0 0 0.4em;
}

/* Reference project information mirrors the legacy rich-bullet-list type
   rhythm. The imported markup retains <strong>, <a>, and <br> semantics. */
.page-node-type-reference .page-body__feature-list__body > h3:first-child {
  color: #000;
  font-size: 16.055px;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.page-node-type-reference .page-body__feature-list__body .formatted-text {
  color: #616161;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.7;
}

.page-node-type-reference .page-body__feature-list__body .formatted-text p {
  margin: 0 0 1.5em;
}

.page-node-type-reference
  .page-body__feature-list__body
  .formatted-text
  > :last-child {
  margin-bottom: 0;
}

.page-node-type-reference .page-body__feature-list__body .formatted-text strong {
  color: #000;
  font-weight: 700;
}

.page-node-type-reference .page-body__feature-list__body .formatted-text a {
  color: #000;
  text-decoration: underline;
}

@media (min-width: 576px) {
  .page-node-type-reference .page-body__feature-list__body > h3:first-child {
    font-size: calc(15.5257px + 0.09189vw);
  }

  .page-node-type-reference .page-body__feature-list__body .formatted-text {
    font-size: calc(12.5714px + 0.0744vw);
  }
}

@media (min-width: 1920px) {
  .page-node-type-reference .page-body__feature-list__body > h3:first-child {
    font-size: 17.29px;
  }

  .page-node-type-reference .page-body__feature-list__body .formatted-text {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .page-body__feature-list__item {
    grid-template-columns: 2.5rem 1fr;
  }
  .page-body__feature-list__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Downloads (replaces .product-detail__downloads-*) -----------------
   Card-style download list. Each <a> renders as a card with:
   - a CSS-shaped document badge on the left (file type label baked in
     via attribute selectors below)
   - title + optional meta stacked in the middle
   - a download arrow on the right that animates downward on hover
   The whole component is built from theme tokens only — primary navy
   for accents, accent grey for meta text, surface white for the card. */

.page-body__downloads {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

@media (min-width: 640px) {
  .page-body__downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__download {
  margin: 0;
}

.page-body__download > a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(0.875rem, 1.4vw, 1.25rem);
  row-gap: 0.15rem;
  align-items: center;
  padding: clamp(0.875rem, 1.6vw, 1.25rem) clamp(1rem, 1.6vw, 1.4rem);
  background: var(--kaindl-color-surface);
  color: var(--kaindl-color-text);
  text-decoration: none;
  border: 1px solid
    color-mix(in srgb, var(--kaindl-color-primary) 14%, transparent);
  border-left: 3px solid
    color-mix(in srgb, var(--kaindl-color-primary) 55%, transparent);
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

/* Document-shape badge with file-type label baked in via ::before. */
.page-body__download > a::before {
  content: "FILE";
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(2.5rem, 3.4vw, 2.875rem);
  height: clamp(3rem, 4.2vw, 3.5rem);
  padding: 0.35rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--kaindl-color-primary);
  background: color-mix(
    in srgb,
    var(--kaindl-color-primary) 7%,
    var(--kaindl-color-surface)
  );
  border: 1.5px solid
    color-mix(in srgb, var(--kaindl-color-primary) 24%, transparent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

.page-body__download > a[href$=".pdf"]::before,
.page-body__download > a[href$=".PDF"]::before {
  content: "PDF";
}
.page-body__download > a[href$=".doc"]::before,
.page-body__download > a[href$=".docx"]::before {
  content: "DOC";
}
.page-body__download > a[href$=".xls"]::before,
.page-body__download > a[href$=".xlsx"]::before {
  content: "XLS";
}
.page-body__download > a[href$=".ppt"]::before,
.page-body__download > a[href$=".pptx"]::before {
  content: "PPT";
}
.page-body__download > a[href$=".zip"]::before {
  content: "ZIP";
}
.page-body__download > a[href$=".jpg"]::before,
.page-body__download > a[href$=".jpeg"]::before,
.page-body__download > a[href$=".png"]::before {
  content: "IMG";
}
.page-body__download > a[href$=".dwg"]::before {
  content: "DWG";
}
.page-body__download > a[href$=".dxf"]::before {
  content: "DXF";
}

/* Download arrow on the right — inline SVG via mask so it picks up
   currentColor and inherits the card's hover state automatically. */
.page-body__download > a::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  width: 1.375rem;
  height: 1.375rem;
  background: currentColor;
  color: color-mix(in srgb, var(--kaindl-color-primary) 70%, transparent);
  -webkit-mask: var(--kaindl-download-icon) no-repeat center / contain;
  mask: var(--kaindl-download-icon) no-repeat center / contain;
  --kaindl-download-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v12'/><path d='M7 11l5 5 5-5'/><path d='M5 20h14'/></svg>");
  transition:
    color 200ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-body__download__title {
  grid-column: 2;
  font-weight: 700;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.3;
}

.page-body__download__meta {
  grid-column: 2;
  color: var(--kaindl-color-accent);
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  line-height: 1.4;
}

.page-body__download > a:hover,
.page-body__download > a:focus-visible {
  background: var(--kaindl-color-surface);
  border-color: var(--kaindl-color-primary);
  border-left-color: var(--kaindl-color-primary);
  box-shadow: 0 8px 22px -10px
    color-mix(in srgb, var(--kaindl-color-primary) 38%, transparent);
  transform: translateY(-1px);
}

.page-body__download > a:hover::before,
.page-body__download > a:focus-visible::before {
  color: var(--kaindl-color-surface);
  background: var(--kaindl-color-primary);
  border-color: var(--kaindl-color-primary);
}

.page-body__download > a:hover::after,
.page-body__download > a:focus-visible::after {
  color: var(--kaindl-color-primary);
  transform: translateY(2px);
}

.page-body__download > a:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: 2px;
}

/* Banner-gallery variant — horizontal topic cards with text on the left
   and a photographic image on the right. Used on /en/company/ (and any
   other hub page needing the same split layout). Whole card is clickable
   via an expanded `::before` on the heading anchor. */

.page-body__gallery.page-body__gallery--banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.75vw, 1.75rem);
}

@media (min-width: 768px) {
  .page-body__gallery.page-body__gallery--banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__gallery--banners .page-body__gallery__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head img"
    "sub  img"
    "cta  img";
  gap: 0;
  background: #f5f5f5;
  min-height: clamp(14rem, 22vw, 18rem);
  overflow: hidden;
  transition:
    box-shadow 250ms ease,
    transform 250ms ease;
}

.page-body__gallery--banners .page-body__gallery__item:hover,
.page-body__gallery--banners .page-body__gallery__item:focus-within {
  box-shadow: 0 0.75rem 2rem rgba(17, 17, 17, 0.1);
  transform: translateY(-2px);
}

.page-body__gallery--banners .page-body__gallery__item > img {
  grid-area: img;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-body__gallery--banners .page-body__gallery__item > h3 {
  grid-area: head;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.25rem, 2vw, 2rem) 0;
  font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem); /* 22 → 26 */
  line-height: 1.2;
  font-weight: 700;
  color: var(--kaindl-color-text);
}

.page-body__gallery--banners .page-body__gallery__item > h3 a {
  color: inherit;
  text-decoration: none;
}

/* Expanded hit area — makes the whole card clickable via the heading
   anchor while keeping the semantic link intact. */
.page-body__gallery--banners .page-body__gallery__item > h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-body__gallery--banners .page-body__gallery__item > h3 a:focus-visible {
  outline: none;
}

.page-body__gallery--banners .page-body__gallery__item:focus-within {
  outline: 2px solid var(--kaindl-focus-ring, #2563eb);
  outline-offset: 2px;
}

.page-body__gallery--banners .page-body__gallery__item > p {
  grid-area: sub;
  margin: 0.5rem 0 0;
  padding: 0 clamp(1.25rem, 2vw, 2rem);
  color: #6b6b6b;
  font-size: 0.9375rem; /* 15 */
  line-height: 1.5;
  max-width: 32ch;
}

/* "Find out more →" CTA, generated purely in CSS so we don't have to
   touch the upstream markup. */
.page-body__gallery--banners .page-body__gallery__item::after {
  grid-area: cta;
  content: "Find out more";
  margin: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 2rem)
    clamp(1.25rem, 2vw, 1.75rem);
  font-size: 0.6875rem; /* 11 */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kaindl-color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: end;
}

.page-body__gallery--banners .page-body__gallery__item::after {
  /* Trailing arrow glyph appended to the CTA via second ::after */
  content: "Find out more  \2192"; /* → */
}

@media (max-width: 639px) {
  .page-body__gallery--banners .page-body__gallery__item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "img"
      "head"
      "sub"
      "cta";
    min-height: 0;
  }
  .page-body__gallery--banners .page-body__gallery__item > img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* Gallery (replaces .basic-slider / .caption-slider by default) ----- */

.page-body__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-body__gallery__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-body__gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

.page-body__gallery--captioned .page-body__gallery__item > h3,
.page-body__gallery--captioned .page-body__gallery__item > p {
  margin: 0;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 {
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin-top: 4px;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 a {
  color: var(--kaindl-color-primary);
  text-decoration: none;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 a:hover,
.page-body__gallery--captioned .page-body__gallery__item > h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-body__gallery--captioned .page-body__gallery__item > p {
  color: var(--kaindl-color-accent);
  font-size: var(--kaindl-type-card-text);
}

.page-body__gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Content carousel (live-style .content-carousel replacement) ------- */

/* Boards Collection 2025: reproduce the legacy Bootstrap carousel widths
   outside Drupal's constrained article and retain the full-width CTA band. */
.page-body.page-body--boards-collection-2025
  > .page-body--boards-collection-2025__carousel,
.page-body.page-body--boards-collection-2025
  > .page-body--boards-collection-2025__trends {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

.page-body--boards-collection-2025__carousel
  .page-body__content-carousel {
  font-size: 13.6446px;
  line-height: 23.1958px;
  width: calc(100vw - 40px);
}

.page-body.page-body--boards-collection-2025
  > .page-body--boards-collection-2025__trends {
  margin-block: 60px;
  padding: 70px 0;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .page-body__teaser-banner {
  max-width: 445.725px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .page-body__teaser-banner__headline {
  font-size: 22.7052px;
  line-height: 27.2463px;
  margin: 0 0 11.3526px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .page-body__teaser-banner__text p {
  font-size: 13.6446px;
  line-height: 23.1958px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .page-body__teaser-banner__cta {
  margin-top: 40px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .btn {
  font-size: 11px;
  height: 44px;
  letter-spacing: 1.65px;
  line-height: 18.7px;
  padding: 0 18px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__trends
  .btn::after {
  height: 11px;
  margin-left: 8.8px;
  width: 11px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__carousel
  .page-body__content-carousel__label-title {
  font-size: 22.7052px;
  line-height: 27.2463px;
  margin: 0 0 8px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__carousel
  .page-body__content-carousel__label-text {
  font-size: 13.6446px;
  line-height: 23.1958px;
}

.page-body.page-body--boards-collection-2025
  .page-body--boards-collection-2025__carousel
  .page-body__content-carousel__pagination-wrapper {
  --cc-pagination-top: 3em;
}

@media (min-width: 768px) {
  .page-body--boards-collection-2025__carousel
    .page-body__content-carousel {
    width: calc((100vw - 10px) * 0.8333333 - 30px);
  }
}

@media (min-width: 1200px) {
  .page-body--boards-collection-2025__carousel
    .page-body__content-carousel {
    width: calc((100vw - 10px) * 0.6666667 - 30px);
  }
}

@media (min-width: 1600px) {
  .page-body--boards-collection-2025__carousel
    .page-body__content-carousel {
    width: calc((100vw - 10px) * 0.5 - 30px);
  }
}

/* The legacy collection tail is one overlapping image/card component. The
   original import incorrectly split it into dimensions, image, CTA and
   download fragments. */
.page-body.page-body--boards-collection-2025
  > .page-body--boards-collection-2025__collection {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  padding: 50px 0;
  width: 100vw;
}

.page-body--boards-collection-2025__collection
  .collection-teaser__image-wrapper {
  aspect-ratio: 2 / 1;
}

.page-body--boards-collection-2025__collection
  .collection-teaser__image {
  height: 100%;
  object-fit: cover;
}

.page-body--boards-collection-2025__downloads {
  margin-inline: auto;
  width: calc(100vw - 40px);
}

@media (min-width: 768px) {
  .page-body--boards-collection-2025__downloads {
    width: calc((100vw - 10px) * 0.8333333 - 30px);
  }
}

@media (min-width: 1200px) {
  .page-body.page-body--boards-collection-2025
    > .page-body--boards-collection-2025__collection
    .collection-teaser__layout {
    max-width: 1160px;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__media {
    width: 79.44%;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__body {
    margin-bottom: -20px;
    margin-top: -160px;
    max-width: 684px;
    width: 58.97%;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__box {
    min-height: 0;
    padding: 75px 120px;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__box-headline {
    font-size: 34.6306px;
    line-height: 41.5568px;
    margin: 0 0 8px;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__box-text {
    margin-top: 0;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__box-text p {
    font-size: 13.6446px;
    line-height: 23.1958px;
  }

  .page-body--boards-collection-2025__collection
    .collection-teaser__box-cta {
    font-size: 11px;
    height: 44px;
    line-height: 18.7px;
    padding-inline: 24.5px;
  }

  .page-body--boards-collection-2025__downloads {
    width: calc((100vw - 10px) * 0.6666667 - 30px);
  }
}

@media (min-width: 1600px) {
  .page-body--boards-collection-2025__downloads {
    width: calc((100vw - 10px) * 0.5 - 30px);
  }
}

.page-body__content-carousel-section {
  align-items: center;
}

.page-body__content-carousel-section.section-spacer {
  padding-block: 60px;
}

.page-body__content-carousel {
  --cc-bg: #f5f5f5;
  --cc-text: #000;
  --cc-muted: #616161;
  --cc-rule: #ddd;

  width: min(100%, 57.35rem);
  margin-inline: auto;
  color: var(--cc-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.page-body__content-carousel__headline {
  margin: 0 0 39.5567px;
  font-size: 26.3711px;
  line-height: 31.6454px;
  font-weight: 700;
  color: var(--cc-text);
}

.page-body__content-carousel__slider-wrapper {
  position: relative;
  overflow: visible;
  padding-inline: 30px;
}

.page-body__content-carousel__slider-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: var(--cc-bg);
}

.page-body__content-carousel__slider.swiper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
}

.page-body__content-carousel__slider .page-body__content-carousel__slide {
  width: 572px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  opacity: 1;
  transition:
    opacity 360ms ease,
    transform 360ms ease,
    filter 360ms ease;
}

.page-body__content-carousel__slide.is-active,
.page-body__content-carousel__slide.swiper-slide-active {
  opacity: 1;
  filter: none;
}

.page-body__content-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-body__content-carousel__labels.swiper {
  margin: 0;
  padding: 20px 30px;
  background: var(--cc-bg);
  overflow: hidden;
}

.page-body__content-carousel__labels .page-body__content-carousel__label {
  width: 572px;
  max-width: 100%;
  box-sizing: border-box;
  opacity: 0;
  color: var(--cc-muted);
}

.page-body__content-carousel__label.is-active,
.page-body__content-carousel__label.swiper-slide-active {
  opacity: 1;
}

.page-body__content-carousel__label-title {
  margin: 0 0 8px;
  font-size: 26.3711px;
  line-height: 31.6454px;
  font-weight: 700;
  color: var(--cc-text);
}

.page-body__content-carousel__label-text {
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: 200;
  color: var(--cc-muted);
}

.page-body__content-carousel__label-text p {
  margin: 0;
}

.page-body__content-carousel__pagination-wrapper {
  --cc-pagination-x: 150px;
  --cc-pagination-top: 42px;

  position: relative;
  padding: var(--cc-pagination-top) var(--cc-pagination-x) 40px;
  background: var(--cc-bg);
}

.page-body__content-carousel__pagination-line {
  position: absolute;
  top: calc(var(--cc-pagination-top) + 0.875em);
  left: calc(var(--cc-pagination-x) + 1em);
  right: calc(var(--cc-pagination-x) + 1em);
  height: 1px;
  margin: 0;
  background: var(--cc-rule);
  transform: translateY(-50%);
}

.page-body__content-carousel__pagination {
  position: relative;
  /* Swiper's stylesheet puts bottom: 8px on horizontal bullet paginations;
     with position: relative that drags the bullets 8px above the line. */
  --swiper-pagination-bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 0;
  height: 0;
  margin: 0.875em 0;
  color: var(--cc-text);
}

.page-body__content-carousel__pagination-bullet {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  font-weight: 700;
}

.page-body__content-carousel__pagination-bullet::before {
  content: "";
  display: block;
  width: 1.75em;
  height: 1.75em;
  border: 1px solid;
  background: currentColor;
  pointer-events: all;
  z-index: 3;
  transform: translateY(-50%) rotate(-45deg) scale(0.33);
  transition: 0.3s ease-out;
}

.page-body__content-carousel__pagination-bullet--active::before {
  background: var(--cc-bg);
  transform: translateY(-50%) rotate(-45deg) scale(1);
}

.page-body__content-carousel__pagination-bullet:focus {
  outline: none;
}

.page-body__content-carousel:not(.is-hydrating):not(.is-initialized)
  .page-body__content-carousel__slider
  .swiper-wrapper,
.page-body__content-carousel.is-fallback
  .page-body__content-carousel__slider
  .swiper-wrapper {
  display: flex;
}

.page-body__content-carousel:not(.is-hydrating):not(.is-initialized)
  .page-body__content-carousel__slide:not(:first-child),
.page-body__content-carousel:not(.is-hydrating):not(.is-initialized)
  .page-body__content-carousel__label:not(:first-child),
.page-body__content-carousel.is-fallback
  .page-body__content-carousel__slide:not(:first-child),
.page-body__content-carousel.is-fallback
  .page-body__content-carousel__label:not(:first-child) {
  display: none;
}

@media (max-width: 767px) {
  .page-body__content-carousel {
    width: 100%;
  }

  .page-body__content-carousel__headline {
    padding-inline: var(--kaindl-container-padding, 1rem);
  }

  .page-body__content-carousel__slider.swiper {
    width: 100%;
  }

  .page-body__content-carousel__slider .page-body__content-carousel__slide,
  .page-body__content-carousel__labels .page-body__content-carousel__label {
    width: min(572px, calc(100vw - 2rem)) !important;
  }

  .page-body__content-carousel__labels.swiper {
    padding-inline: 1rem;
  }

  .page-body__content-carousel__pagination-wrapper {
    --cc-pagination-x: clamp(2rem, 12vw, 5rem);
  }
}

/* Steps (replaces .content-carousel) -------------------------------- */

.page-body__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 48px);
}

.page-body__steps__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 24px);
}

@media (min-width: 1025px) {
  .page-body__steps__item {
    grid-template-columns: minmax(240px, 1fr) 1.2fr;
    align-items: center;
  }
}

/* Video (replaces .video-slider / .video-embed) --------------------- */

.page-body__videos {
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  /* upgrade_video emits one ``.page-body__videos`` per source
     ``.video-slider`` — typically a single video. Cap the container at a
     comfortable video width and center within the surrounding section so the
     embed doesn't sprawl to 1336px wide on desktop. When a single group ever
     contains multiple figures the ``auto-fit`` rule still flows them 2-up. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  /* ``.page-body__section > .container`` is a flex-column, so block-level
     grid children don't auto-fill the cross axis — force the grid to span
     the container before the max-width cap centers a narrower embed. */
  width: 100%;
  max-width: min(100%, 960px);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.page-body__video {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.page-body__video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
  display: block;
}

.page-body__video figcaption {
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-text);
}

.page-body__video figcaption strong {
  display: block;
  font-size: var(--kaindl-type-card-title);
  margin-bottom: 0.25em;
}

/* Generic fallback: any <iframe> emitted directly inside .page-body (e.g.
   Matterport 3D tour on /company/floor-house/) gets a responsive 16:9 frame
   without needing a bespoke wrapper. .page-body__video iframes have their
   own aspect rule above and take precedence via specificity. */
.page-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
}

/* Promotional card pairs used at the end of restored BOARDS 2020 landing
   pages. The old site presents these as equal-height grey copy/image tiles. */
.page-body__promo-section {
  max-width: none;
}

.page-body__promo-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--kaindl-container-max);
  width: 100%;
}

.page-body__promo-card {
  background: #f5f5f5;
  color: #111;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 42%);
  min-height: clamp(15rem, 24vw, 22rem);
  overflow: hidden;
  text-decoration: none;
}

.page-body__promo-card-copy {
  align-content: center;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 3.25rem);
}

.page-body__promo-card-copy strong {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.page-body__promo-card-copy span {
  color: #777;
  font-size: 1rem;
  line-height: 1.45;
}

.page-body__promo-card-media,
.page-body__promo-card-media img {
  display: block;
  height: 100%;
  width: 100%;
}

.page-body__promo-card-media img {
  object-fit: cover;
  transition: transform 450ms ease;
}

.page-body__promo-card:hover .page-body__promo-card-media img,
.page-body__promo-card:focus-visible .page-body__promo-card-media img {
  transform: scale(1.035);
}

@media (max-width: 899px) {
  .page-body__promo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 559px) {
  .page-body__promo-card {
    grid-template-columns: 1fr;
  }

  .page-body__promo-card-media {
    aspect-ratio: 16 / 10;
    grid-row: 1;
  }
}

/* FAQ (replaces .faq-list) ------------------------------------------ */

.page-body__faq {
  border-top: 1px solid #e5e7eb;
}

.page-body__faq-item {
  border-bottom: 1px solid #e5e7eb;
}

.page-body__faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(14px, 1.6vw, 20px) 0;
  font-weight: 700;
  color: var(--kaindl-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kaindl-gutter);
}

.page-body__faq-item > summary:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.page-body__faq-item > summary > h2,
.page-body__faq-item > summary > h3,
.page-body__faq-item > summary > h4 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.page-body__faq-item > summary::-webkit-details-marker {
  display: none;
}

.page-body__faq-item > summary::after {
  content: "+";
  font-size: 1.4em;
  line-height: 1;
  color: var(--kaindl-color-primary);
  transition: transform 120ms ease;
}

.page-body__faq-item[open] > summary::after {
  content: "−";
}

.page-body__faq-item > :not(summary) {
  padding: 0 0 clamp(14px, 1.6vw, 20px);
}

/* Testimonials — Swiper-driven editorial slider --------------------
   JS (testimonials-slider.js) wraps the `.page-body__testimonials` <ul>
   in a `.swiper` container, tags each <li> as `.swiper-slide`, and
   renders autoplay + navigation + pagination. The UL's own layout is
   overridden to a plain flex (Swiper handles alignment); the editorial
   card design on each <li> stays intact. */

.page-body__testimonials,
.page-body__testimonials-slider {
  --tm-serif: "Times New Roman", Times, ui-serif, Georgia, serif;
  --tm-accent: var(--kaindl-color-primary, #111);
  --tm-rule: #d9d9d9;
  --tm-meta: #6b6b6b;
}

.page-body__testimonials {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Pre-init / no-JS fallback: render as a responsive grid so the block
   is still readable if Swiper never hydrates. */
.page-body__testimonials:not(.swiper-wrapper) {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 640px) {
  .page-body__testimonials:not(.swiper-wrapper) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (min-width: 1280px) {
  .page-body__testimonials:not(.swiper-wrapper) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Slider container — adds space for the oversized quote glyph (which
   overflows each slide's top edge), pagination dots below, and side
   gutters for the nav buttons. */
.page-body__testimonials-slider.swiper {
  position: relative;
  padding-top: clamp(4rem, 5vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 5vw, 5rem);
  padding-inline: 0;
  overflow: hidden;
  /* Flex-column parent (.page-body__section) gives children min-width: auto
     which lets loop-mode Swiper blow out horizontally. Force a stable width
     so Swiper sizes slides against the real container, not its intrinsic
     (infinite) content width. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Pagination — centered row of round dots below the cards. */
.page-body__testimonials-slider__pagination {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tm-rule);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet:hover {
  background: var(--tm-meta);
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet-active {
  background: var(--tm-accent);
  transform: scale(1.25);
}

/* After Swiper wraps the UL, disable its grid so slide widths obey
   Swiper's flex calculations. */
.page-body__testimonials.swiper-wrapper {
  align-items: stretch;
}

/* Each slide card keeps its editorial styling but needs a stable height
   so the swiper row stays aligned when items have uneven quote lengths. */
.page-body__testimonials.swiper-wrapper > li.swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/* Card: no container chrome, just a hairline top rule + generous padding.
   The hero is a huge hollow serif quote glyph, not a box. */
.page-body__testimonials > li {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  padding: clamp(1.5rem, 2.25vw, 2.5rem) 0 0;
  border-top: 1px solid var(--tm-rule);
  isolation: isolate;
}

/* Giant hollow quote glyph, top-left, negative-offset, serif.
   Low-opacity by default, saturates on hover/focus of the li. */
.page-body__testimonials > li::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: -0.6em;
  font-family: var(--tm-serif);
  font-weight: 400;
  font-size: clamp(6rem, 9vw, 9.5rem);
  line-height: 0.9;
  color: var(--tm-accent);
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
  transition:
    opacity 500ms cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
}

.page-body__testimonials > li:hover::before,
.page-body__testimonials > li:focus-within::before {
  opacity: 0.24;
  transform: translate(-0.03em, -0.06em);
}

/* Quote body — set in the theme's sans, slightly larger than body copy.
   No border-left; the glyph is the visual anchor. */
.page-body__testimonials blockquote {
  margin: 0;
  padding: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); /* 17 → 19px */
  line-height: 1.55;
  color: var(--kaindl-color-text);
  max-width: 32rem;
}

.page-body__testimonials blockquote p {
  margin: 0;
}

.page-body__testimonials blockquote p + p {
  margin-top: 0.75em;
}

/* Attribution rail — avatar + name/role stacked beside it, separated by a
   thin vertical rule for a "credit bar" feel. */
.page-body__testimonials > li figure {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-rule);
}

.page-body__testimonials > li figure img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  grid-column: 1;
  filter: grayscale(8%);
}

/* Figures without an image: collapse to a 2-col rule so the name doesn't
   shift left. */
.page-body__testimonials > li figure:not(:has(img)) {
  grid-template-columns: auto 1fr;
}

.page-body__testimonials > li figure::after {
  content: "";
  grid-column: 2;
  align-self: stretch;
  width: 1px;
  background: var(--tm-rule);
  margin-block: 0.25rem;
}

.page-body__testimonials > li figure:not(:has(img))::after {
  display: none;
}

.page-body__testimonials figcaption {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.35;
}

.page-body__testimonials > li figure:not(:has(img)) figcaption {
  grid-column: 2;
}

.page-body__testimonials figcaption br {
  display: none;
}

.page-body__testimonials figcaption strong {
  font-size: 1.0625rem; /* 17px */
}

.page-body__testimonials figcaption span {
  color: var(--tm-meta);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Motion: stagger the entry reveal if the browser supports it, so the
   cards appear in sequence as the section scrolls into view. Degrades
   gracefully on browsers without scroll-driven animation timelines. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .page-body__testimonials > li {
      animation: tm-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

@keyframes tm-reveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Jobs (replaces .job-list) ----------------------------------------- */

.page-body__jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
}

.page-body__jobs > li > a {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: clamp(14px, 1.6vw, 20px) var(--kaindl-gutter);
  background: #fff;
  color: var(--kaindl-color-text);
  text-decoration: none;
  gap: var(--kaindl-gutter);
  align-items: baseline;
}

.page-body__jobs > li > a:hover,
.page-body__jobs > li > a:focus-visible {
  background: #f5f5f5;
}

/* Collapsible (generic .collapsible) -------------------------------- */

.page-body__collapsible {
  border: 1px solid #e5e7eb;
  padding: 0 var(--kaindl-gutter);
}

.page-body__collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(12px, 1.4vw, 16px) 0;
  font-weight: 700;
}

/* Quote / callout --------------------------------------------------- */

.page-body__quote {
  border-left: 3px solid var(--kaindl-color-primary);
  padding: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 24px);
  font-size: var(--kaindl-type-subtitle);
  line-height: var(--kaindl-leading-subtitle);
  margin: 0;
  color: var(--kaindl-color-text);
}

/* References listing filter ----------------------------------------- */

.references-filter {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.references-filter::before {
  content: none;
}

.references-filter__label {
  display: block;
  margin: 0 0 0.75rem;
  color: #69737d;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.references-filter__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.references-filter__item {
  margin: 0;
}

.references-filter__item label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #111;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  user-select: none;
  transition: color 0.18s ease;
}

.references-filter__item label:has(input:checked) {
  color: #111;
}

.references-filter__item label:not(:has(input:checked)) {
  color: #69737d;
}

.references-filter__item input {
  appearance: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.references-filter__item input:checked {
  background: #111;
  border-color: #111;
  color: #fff;
}

.references-filter__item input::before {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.6rem;
  margin-block-start: -0.12rem;
  border: solid currentColor;
  border-width: 0 0.14rem 0.14rem 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.14s ease;
}

.references-filter__item input:checked::before {
  transform: rotate(45deg) scale(1);
}

.references-filter__item input:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .references-filter__items {
    gap: 0.5rem 1rem;
  }
}

/* --- references-grid (kaindl_references listing) --- */
.references-grid {
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.references-grid[hidden] {
  display: none !important;
}

.references-grid__headline {
  position: relative;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  /* margin is supplied by base .page-body h3 — the h3 element selector wins on
     specificity (0,1,1) over this class alone (0,1,0). */
}

.references-grid__headline::after {
  position: absolute;
  left: -11px;
  top: 0;
  z-index: -1;
  color: #f5f5f5;
  font-size: clamp(6rem, 10.5vw, 12.75rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.8;
  pointer-events: none;
  white-space: nowrap;
}

@media (min-width: 1680px) {
  .references-grid__headline::after {
    left: clamp(-10rem, -8.4vw, -4rem);
  }
}

.references-grid[data-references-category="Boards"]
  .references-grid__headline::after {
  content: "Boards";
}

.references-grid[data-references-category="Wood Veneered Boards"]
  .references-grid__headline::after {
  content: "Wood\A Veneered\A Boards";
  white-space: pre;
}

.references-grid[data-references-category="Floors"]
  .references-grid__headline::after {
  content: "Floors";
}

.references-grid__items {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
}

.references-grid__group {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Collapse groups whose items are all hidden (load-more / filtered out) so
   they don't leave empty gap space in the parent flex column. */
.references-grid__group:not(:has(> .references-grid__item:not([hidden]))) {
  display: none !important;
}

@media (min-width: 768px) {
  .references-grid__group[data-count="3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  /* Default (odd groups): large left, two smalls stacked right. */
  .references-grid__items
    > .references-grid__group[data-count="3"]:nth-child(odd)
    .references-grid__item--large {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Even groups: flip — large right, smalls stack left. */
  .references-grid__items
    > .references-grid__group[data-count="3"]:nth-child(even)
    .references-grid__item--large {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .references-grid__items
    > .references-grid__group[data-count="3"]:nth-child(even)
    .references-grid__item--small {
    grid-column: 1;
  }

  /* Trailing 1-card group: single full-width landscape card. */
  .references-grid__group[data-count="1"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .references-grid__group[data-count="1"] .references-grid__item--large {
    grid-column: 1;
    grid-row: auto;
  }
  .references-grid__group[data-count="1"]
    .references-grid__item--large
    .references-grid__image {
    aspect-ratio: 16 / 9;
  }

  /* Trailing 2-card group: two equal portrait columns, no row-span. */
  .references-grid__group[data-count="2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  .references-grid__group[data-count="2"] .references-grid__item--large,
  .references-grid__group[data-count="2"] .references-grid__item--small {
    grid-column: auto;
    grid-row: auto;
  }
  .references-grid__group[data-count="2"]
    .references-grid__item
    .references-grid__image {
    aspect-ratio: 4 / 5;
  }
}

.references-grid__item {
  margin: 0;
}
.references-grid__item[hidden] {
  display: none !important;
}

.references-grid__card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 18, 18, 0.06);
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow 0.24s ease,
    transform 0.24s ease;
}
.references-grid__card:hover,
.references-grid__card:focus-visible {
  box-shadow: 0 10px 24px rgba(18, 18, 18, 0.12);
  transform: translateY(-2px);
}

.references-grid__image {
  aspect-ratio: 4 / 3;
  background: #f5f5f5;
  margin: 0;
  overflow: hidden;
}
.references-grid__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Inside a 3-card group at tablet+, sizing comes from the large image's
   portrait aspect; smalls fill the remaining cells via flex/object-fit. */
@media (min-width: 768px) {
  .references-grid__group[data-count="3"]
    .references-grid__item--large
    .references-grid__image {
    aspect-ratio: 3 / 4;
    flex: 1 1 auto;
    height: auto;
  }

  .references-grid__group[data-count="3"]
    .references-grid__item--small
    .references-grid__image {
    aspect-ratio: auto;
    flex: 1 1 auto;
    height: auto;
  }
}

.references-grid__title {
  color: #111;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.references-grid__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.references-grid__load-more {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* The global primary button uses a right arrow. Load-more mirrors the legacy
   component with an explicit down arrow instead. */
.references-grid__load-more::after {
  display: none;
}

.references-grid__load-more .btn__icon {
  display: inline-flex;
  flex: 0 0 16px;
  height: 16px;
  margin-left: 10px;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  width: 16px;
}

.references-grid__load-more .btn__icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.references-grid__load-more:hover .btn__icon,
.references-grid__load-more:focus-visible .btn__icon {
  transform: translateY(3px);
}

.references-grid__load-more[hidden] {
  display: none !important;
}

/* Job list (old Kaindl .job-list parity) ---------------------------- */

.page-body__job-list {
  --job-list-text: #616161;
  --job-list-dark: #000;
  --job-list-rule: #d2d2d2;
  --job-list-column-gap: 30px;
  align-self: center;
  color: var(--job-list-text);
  font-size: 14px;
  line-height: 1.7;
  padding-top: 60px;
  padding-bottom: 60px;
}

.page-body__job-list > h2 {
  width: 100%;
  margin: 0 0 39.5px;
  color: var(--job-list-dark);
  font-size: 26.3711px;
  line-height: 1.2;
  font-weight: 700;
}

.page-body__job-list .page-body__faq {
  width: 100%;
  border-top: 0;
}

.page-body__job-list .page-body__faq-item {
  padding: 0 25px;
  border-top: 1px solid var(--job-list-rule);
  border-bottom: 0;
}

.page-body__job-list .page-body__faq-item:last-child {
  border-bottom: 1px solid var(--job-list-rule);
}

.page-body__job-list .page-body__faq-item > summary {
  min-height: 100px;
  padding: 15px 0;
  gap: 24px;
  color: var(--job-list-text);
  font-size: 17.29px;
  line-height: 21px;
  font-weight: 200;
}

.page-body__job-list .page-body__faq-item > summary > h3 {
  display: inline;
  flex: 1 1 auto;
  color: var(--job-list-dark);
  font-size: 17.29px;
  line-height: 1.2;
  font-weight: 700;
}

.page-body__job-list .page-body__faq-item__meta {
  flex: 0 0 auto;
  color: var(--job-list-text);
  font-weight: 200;
}

.page-body__job-list .page-body__faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  border-top: 2px solid var(--job-list-dark);
  border-right: 2px solid var(--job-list-dark);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.page-body__job-list .page-body__faq-item[open] > summary::after {
  content: "";
  transform: rotate(135deg);
}

.page-body__job-list .page-body__faq-item > .kaindl-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--job-list-column-gap);
  row-gap: 21px;
  padding: 30px 0 50px;
  color: var(--job-list-text);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 200;
}

.page-body__job-list .page-body__faq-item > .kaindl-copy > div,
.page-body__job-list .page-body__faq-item > .kaindl-copy > p {
  margin: 0;
}

.page-body__job-list .page-body__faq-item > .kaindl-copy > p:has(.btn) {
  grid-column: 1 / -1;
  padding-top: 29px;
}

.page-body__job-list .kaindl-copy h4 {
  margin: 0 0 0.75em;
  color: var(--job-list-dark);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
}

.page-body__job-list .kaindl-copy ul,
.page-body__job-list .kaindl-copy ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.page-body__job-list .kaindl-copy ul > li,
.page-body__job-list .kaindl-copy ol > li {
  padding-left: 0;
}

.page-body__job-list .kaindl-copy ul > li::before {
  content: none;
}

.page-body__job-list .kaindl-copy p {
  margin: 0 0 1em;
}

.page-body__job-list .kaindl-copy a:not(.btn) {
  color: var(--job-list-dark);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

@media (max-width: 767px) {
  .page-body__job-list {
    width: 100%;
    max-width: none;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .page-body__job-list .page-body__faq-item {
    padding-right: 0;
    padding-left: 0;
  }

  .page-body__job-list .page-body__faq-item > summary {
    min-height: 82px;
    align-items: center;
  }

  .page-body__job-list .page-body__faq-item__meta {
    display: none;
  }

  .page-body__job-list .page-body__faq-item > .kaindl-copy {
    grid-template-columns: 1fr;
  }
}

/* Old kaindl.com compatibility for /floors/accessories.
   The imported source page is a long product-information page, not a modern
   card/grid landing page, so it keeps the old narrow text + product-image
   rhythm instead of the generic imported-page two-column layout. */
.page-body--legacy-accessories {
  font-size: 0.875rem;
  line-height: 1.7;
}

.page-body--legacy-accessories > .content-element {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.page-body--legacy-accessories .container-fluid {
  margin-inline: auto;
  width: 100%;
}

.page-body--legacy-accessories .container--padded {
  padding-inline: clamp(1rem, 1.2vw, 1.5rem);
}

.page-body--legacy-accessories .text-image-content {
  padding-block: 3.75rem;
}

.page-body--legacy-accessories .text-image-content__section + .text-image-content__section {
  margin-top: 2rem;
}

.page-body--legacy-accessories .row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
}

.page-body--legacy-accessories [class*="col-"] {
  min-width: 0;
  padding-inline: 0.9375rem;
}

.page-body--legacy-accessories .col-12 {
  grid-column: 1 / -1;
}

.page-body--legacy-accessories .kaindl-copy {
  font-size: inherit;
  line-height: inherit;
}

.page-body--legacy-accessories h2,
.page-body--legacy-accessories .text-image-content__headline {
  color: #111;
  font-size: clamp(1.8rem, 1.84vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.page-body--legacy-accessories .formatted-text > * + * {
  margin-top: 1rem;
}

.page-body--legacy-accessories picture,
.page-body--legacy-accessories .image {
  display: block;
}

.page-body--legacy-accessories .image {
  height: auto;
  margin-left: auto;
  max-width: 100%;
  width: 100%;
}

.page-body--legacy-accessories .teaser-banner {
  background: #f5f5f5;
  margin-block: 3.75rem;
  padding-block: 4.375rem;
  text-align: center;
}

.page-body--legacy-accessories .teaser-banner .row {
  justify-content: center;
}

.page-body--legacy-accessories .teaser-banner__headline {
  font-size: clamp(1.8rem, 1.84vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.page-body--legacy-accessories .teaser-banner__text {
  margin-bottom: 1.75rem;
}

.page-body--legacy-accessories .teaser-banner__text p {
  margin: 0;
}

@media (min-width: 576px) {
  .page-body--legacy-accessories .col-sm-10 {
    grid-column-end: span 10;
  }

  .page-body--legacy-accessories .offset-sm-1 {
    grid-column-start: 2;
  }
}

@media (min-width: 768px) {
  .page-body--legacy-accessories .col-md-4 {
    grid-column-end: span 4;
  }

  .page-body--legacy-accessories .col-md-6 {
    grid-column-end: span 6;
  }

  .page-body--legacy-accessories .col-md-8 {
    grid-column-end: span 8;
  }

  .page-body--legacy-accessories .col-md-10 {
    grid-column-end: span 10;
  }

  .page-body--legacy-accessories .offset-md-1 {
    grid-column-start: 2;
  }

  .page-body--legacy-accessories .offset-md-2 {
    grid-column-start: 3;
  }

  .page-body--legacy-accessories .d-md-flex {
    display: flex;
  }

  .page-body--legacy-accessories .justify-content-md-end {
    justify-content: flex-end;
  }

  .page-body--legacy-accessories .align-items-md-end {
    align-items: flex-end;
  }

  .page-body--legacy-accessories .row > [class*="col-"] + [class*="col-"] {
    grid-column-start: auto;
  }
}

@media (min-width: 992px) {
  .page-body--legacy-accessories .col-lg-6 {
    grid-column-end: span 6;
  }

  .page-body--legacy-accessories .offset-lg-3 {
    grid-column-start: 4;
  }
}

@media (min-width: 1200px) {
  .page-body--legacy-accessories .col-xl-3 {
    grid-column-end: span 3;
  }

  .page-body--legacy-accessories .col-xl-4 {
    grid-column-end: span 4;
  }

  .page-body--legacy-accessories .col-xl-5 {
    grid-column-end: span 5;
  }

  .page-body--legacy-accessories .col-xl-8 {
    grid-column-end: span 8;
  }

  .page-body--legacy-accessories .offset-xl-2 {
    grid-column-start: 3;
  }

  .page-body--legacy-accessories .offset-xl-4 {
    grid-column-start: 5;
  }
}

@media (min-width: 1440px) {
  .page-body--legacy-accessories .col-xxl-2 {
    grid-column-end: span 2;
  }

  .page-body--legacy-accessories .col-xxl-4 {
    grid-column-end: span 4;
  }

  .page-body--legacy-accessories .col-xxl-6 {
    grid-column-end: span 6;
  }

  .page-body--legacy-accessories .offset-xxl-3 {
    grid-column-start: 4;
  }
}

@media (max-width: 767px) {
  .page-body--legacy-accessories > .content-element {
    margin-inline: 0;
    width: 100%;
  }

  .page-body--legacy-accessories .text-image-content {
    padding-block: 3rem;
  }

  .page-body--legacy-accessories [class*="col-"] + [class*="col-"] {
    margin-top: 2rem;
  }

  .page-body--legacy-accessories .image {
    margin-inline: auto;
    max-width: min(20rem, 100%);
  }
}

/* Legacy layout parity for the bathroom-panels and references-index pages.
   Both retain Bootstrap column markup without loading Bootstrap itself. */
.page-body:has(img[src*="/page-bodies/bathroom--panels/"]),
.page-body:has(.references-filter) {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* Bathroom panels. */
.page-body:has(img[src*="/page-bodies/bathroom--panels/"]) {
  font-size: 0.875rem;
  line-height: 1.7;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"]) h2 {
  font-size: 1.6482rem;
  line-height: 1.2;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .text-image-content .row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .text-image-content [class*="col-"] {
  min-width: 0;
  padding-inline: 0.9375rem;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .text-image-content .col-12 {
  grid-column: 1 / -1;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .text-image-content__image img {
  display: block;
  width: 100%;
  height: auto;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  > .page-body__section:nth-child(2) > .kaindl-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  > .page-body__section:nth-child(2) > .kaindl-copy > h2,
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  > .page-body__section:nth-child(2) > .kaindl-copy > .formatted-text {
  grid-column: 4 / span 4;
  padding-inline: 0.9375rem;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  > .page-body__section:nth-child(2) > .kaindl-copy > .btn {
  grid-column: 8 / span 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list {
  width: 50%;
  margin-inline: auto;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list__item {
  grid-template-columns: 2rem 1fr;
  column-gap: 1rem;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list__icon,
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list__icon > img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list__body > h3 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  .page-body__feature-list__body > p {
  display: none;
}
.page-body:has(img[src*="/page-bodies/bathroom--panels/"])
  > .page-body__section:has(.page-body__downloads) {
  width: 50%;
  margin-inline: auto;
}

/* References index. */
.page-body:has(.references-filter) .filter-bar {
  position: relative;
  z-index: 2;
  padding: 1rem max(1.25rem, calc((100vw - 72rem) / 2));
  background: #111;
  color: #fff;
}
.page-body:has(.references-filter) .filter-bar__content,
.page-body:has(.references-filter) .filter-bar__items,
.page-body:has(.references-filter) .filter-bar__item label {
  display: flex;
  align-items: center;
}
.page-body:has(.references-filter) .filter-bar__content,
.page-body:has(.references-filter) .filter-bar__items {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.page-body:has(.references-filter) .filter-bar__content-prefix,
.page-body:has(.references-filter) .filter-bar__item-label {
  color: inherit;
  font-size: 0.8125rem;
}
.page-body:has(.references-filter) .filter-bar__item label {
  gap: 0.5rem;
  cursor: pointer;
}
.page-body:has(.references-filter) .filter-bar input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #fff;
}
.page-body:has(.references-filter) .references-filter__results {
  padding-top: clamp(3rem, 5vw, 5rem);
}
.page-body:has(.references-filter) .references-filter,
.page-body:has(.references-filter) .references-grid {
  box-sizing: border-box;
  margin-inline: auto;
  width: calc(100% - 30px);
}
.page-body:has(.references-filter)
  .references-filter__results > .container-fluid > .row > [class*="col-"] {
  width: 100%;
  margin-inline: auto;
  padding-inline: 0.9375rem;
  box-sizing: border-box;
}
.page-body:has(.references-filter) .references-filter__results-section {
  margin-bottom: clamp(4rem, 7vw, 7rem);
}
.page-body:has(.references-filter) .references-grid__headline {
  margin: 0 0 clamp(2rem, 4vw, 3.75rem);
}
.page-body:has(.references-filter)
  .references-grid__headline[data-text-shadow]::after {
  content: attr(data-text-shadow);
}
.page-body:has(.references-filter) .references-grid__items {
  gap: clamp(3rem, 5vw, 5.625rem);
}
.page-body:has(.references-filter) .references-grid__group {
  gap: clamp(1.5rem, 3vw, 3.75rem);
}
.page-body:has(.references-filter) .references-grid__item {
  min-width: 0;
}
.page-body:has(.references-filter) .references-grid__item-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f5f5f5;
}
.page-body:has(.references-filter) .references-grid__item-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.page-body:has(.references-filter) .references-grid__item-image:hover img,
.page-body:has(.references-filter) .references-grid__item-image:focus-visible img {
  transform: scale(1.025);
}
.page-body:has(.references-filter) .references-grid__item-text {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (min-width: 576px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .col-sm-6 {
    grid-column-end: span 6;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 6;
  }
}
@media (min-width: 768px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .col-md-5 {
    grid-column-end: span 5;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .offset-md-1 {
    grid-column-start: 2;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 5;
  }
  .page-body:has(.references-filter) .references-grid__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 11px;
  }
  .page-body:has(.references-filter) .references-grid__items {
    gap: 0;
  }
  .page-body:has(.references-filter)
    .references-grid__group:nth-child(odd) .references-grid__item--large {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .page-body:has(.references-filter)
    .references-grid__group:nth-child(even) .references-grid__item--large {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .page-body:has(.references-filter)
    .references-grid__group:nth-child(even) .references-grid__item--small {
    grid-column: 1;
  }
.page-body:has(.references-filter)
  .references-grid__item--large .references-grid__item-image {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .page-body:has(.references-filter)
    .references-grid__item--small .references-grid__item-image {
    aspect-ratio: 16 / 9;
  }
  .page-body:has(.references-filter)
    .references-grid__group[data-count="3"]
    .references-grid__item--large
    .references-grid__image {
    aspect-ratio: 285 / 368;
    flex: 0 0 auto;
  }
  .page-body:has(.references-filter)
    .references-grid__group[data-count="3"]
    .references-grid__item--small
    .references-grid__image {
    aspect-ratio: 285 / 164;
    flex: 0 0 auto;
  }
}
@media (min-width: 992px) {
  .page-body:has(.references-filter) .references-filter,
  .page-body:has(.references-filter) .references-grid {
    width: calc(83.333333% - 30px);
  }
  .page-body:has(.references-filter)
    .references-filter__results > .container-fluid > .row > [class*="col-"] {
    width: 83.333333%;
  }
}
@media (min-width: 1200px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .col-xl-4 {
    grid-column-end: span 4;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .offset-xl-2 {
    grid-column-start: 3;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 4;
  }
}
@media (min-width: 1440px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .col-xxl-3 {
    grid-column-end: span 3;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .offset-xxl-3 {
    grid-column-start: 4;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 3;
  }
}
@media (min-width: 1920px) {
  .page-body:has(.references-filter) .references-filter,
  .page-body:has(.references-filter) .references-grid {
    width: calc(66.666667% - 30px);
  }
  .page-body:has(.references-filter)
    .references-filter__results > .container-fluid > .row > [class*="col-"] {
    width: 66.666667%;
  }
}
@media (max-width: 767px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"]),
  .page-body:has(.references-filter) {
    margin-inline: 0;
    width: 100%;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content [class*="col-"] {
    grid-column: 1 / -1;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content [class*="col-"] + [class*="col-"] {
    margin-top: 0;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    > .page-body__section:nth-child(2) > .kaindl-copy {
    display: block;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    > .page-body__section:nth-child(2) > .kaindl-copy > .btn {
    margin-top: 2rem;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .page-body__feature-list,
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    > .page-body__section:has(.page-body__downloads) {
    width: 100%;
  }
  .page-body:has(.references-filter) .filter-bar__content,
  .page-body:has(.references-filter) .filter-bar__items {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .row {
    row-gap: 2rem;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-1 {
    grid-row: 1;
  }
  .page-body:has(img[src*="/page-bodies/bathroom--panels/"])
    .text-image-content .order-2 {
    grid-row: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-body:has(.references-filter) .references-grid__item-image img {
    transition: none;
  }
}

/* Bathroom panels: explicit scope for targeted multilingual recovery seeds. */
.page-body--bathroom-panels {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.page-body--bathroom-panels > .page-body__section {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 1216px;
  padding-inline: 30px;
}

.page-body--bathroom-panels h2 {
  font-size: clamp(1.625rem, 2.15vw, 2.25rem);
  line-height: 1.15;
}

.page-body--bathroom-panels figure {
  margin: 0;
}

.page-body--bathroom-panels figure img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--bathroom-panels__advantages {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-bottom: clamp(4rem, 8vw, 8rem);
  padding-top: clamp(3rem, 6vw, 6rem);
}

.page-body--bathroom-panels__advantages-copy {
  justify-self: end;
  max-width: 430px;
  width: 100%;
}

.page-body--bathroom-panels__advantages-copy ul,
.page-body--bathroom-panels__requirements {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.page-body--bathroom-panels__advantages-copy li,
.page-body--bathroom-panels__requirements li {
  padding-left: 1.15rem;
  position: relative;
}

.page-body--bathroom-panels__advantages-copy li::before,
.page-body--bathroom-panels__requirements li::before {
  background: currentColor;
  content: "";
  height: 0.38rem;
  left: 0.1rem;
  position: absolute;
  top: 0.65em;
  transform: rotate(45deg);
  width: 0.38rem;
}

.page-body--bathroom-panels__installation {
  display: grid;
  gap: 1.5rem 4rem;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.page-body--bathroom-panels__installation-copy {
  max-width: 680px;
}

.page-body--bathroom-panels__installation-copy p {
  line-height: 1.75;
}

.page-body--bathroom-panels__installation-cta {
  align-self: center;
  justify-self: end;
}

.page-body--bathroom-panels__requirements {
  grid-column: 1 / -1;
  margin-top: 0;
}

.page-body--bathroom-panels__requirements li + li {
  margin-top: 0.45rem;
}

.page-body--bathroom-panels__inspiration {
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.page-body--bathroom-panels__inspiration .page-body__content-carousel__label {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.page-body--bathroom-panels__properties {
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.page-body--bathroom-panels__properties > h2 {
  margin: 0 auto clamp(3rem, 5vw, 5rem);
  max-width: 430px;
  text-align: center;
}

.page-body--bathroom-panels__properties .page-body__feature-list {
  display: grid;
  gap: 3rem clamp(3rem, 9vw, 9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 auto;
  max-width: 1050px;
  padding: 0;
  width: 100%;
}

.page-body--bathroom-panels__properties .page-body__feature-list__item {
  align-items: center;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 44px minmax(0, 1fr);
  margin: 0;
  width: auto;
}

.page-body--bathroom-panels__properties .page-body__feature-list__icon {
  height: 44px;
  width: 44px;
}

.page-body--bathroom-panels__properties .page-body__feature-list__icon img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.page-body--bathroom-panels__properties .page-body__feature-list__body h3 {
  font-size: 1rem;
  margin: 0;
}

.page-body--bathroom-panels__decors,
.page-body--bathroom-panels__planning {
  background: #f4f4f4;
  max-width: none !important;
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.page-body--bathroom-panels__decors-inner,
.page-body--bathroom-panels__planning > div {
  margin-inline: auto;
  max-width: 900px;
  text-align: center;
}

.page-body--bathroom-panels__decors h2,
.page-body--bathroom-panels__planning h2 {
  margin-top: 0;
}

.page-body--bathroom-panels__decors .btn,
.page-body--bathroom-panels__planning .btn {
  margin-top: 1.5rem;
}

.page-body--bathroom-panels__downloads {
  padding-bottom: clamp(4rem, 7vw, 7rem);
  padding-top: clamp(4rem, 7vw, 7rem);
}

.page-body--bathroom-panels__downloads > h2,
.page-body--bathroom-panels__downloads > .page-body__download {
  max-width: 680px;
}

.page-body--bathroom-panels__downloads .page-body__download {
  align-items: center;
  border-bottom: 1px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-block: 1rem;
  text-decoration: none;
}

.page-body--bathroom-panels__downloads .page-body__download-icon {
  border: 1px solid #bdbdbd;
  font-size: 0.625rem;
  padding: 0.55rem 0.35rem;
}

.page-body--bathroom-panels__downloads .page-body__download-copy {
  display: grid;
  gap: 0.3rem;
}

.page-body--bathroom-panels__flooring {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.page-body--bathroom-panels__flooring-copy {
  max-width: 520px;
}

.page-body--bathroom-panels__flooring-copy p {
  line-height: 1.75;
}

.page-body--bathroom-panels__flooring-copy .btn {
  margin-top: 1.25rem;
}

.page-body--bathroom-panels__faqs {
  max-width: 960px !important;
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.page-body--bathroom-panels__faqs > h2 {
  margin-bottom: 2rem;
}

.page-body--bathroom-panels__planning p {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .page-body--bathroom-panels {
    margin-inline: 0;
    width: 100%;
  }

  .page-body--bathroom-panels > .page-body__section {
    padding-inline: 20px;
  }

  .page-body--bathroom-panels__advantages,
  .page-body--bathroom-panels__installation,
  .page-body--bathroom-panels__flooring {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-body--bathroom-panels__advantages figure {
    grid-row: 1;
  }

  .page-body--bathroom-panels__advantages-copy,
  .page-body--bathroom-panels__installation-copy,
  .page-body--bathroom-panels__flooring-copy {
    max-width: none;
  }

  .page-body--bathroom-panels__installation-cta {
    justify-self: start;
  }

  .page-body--bathroom-panels__requirements {
    grid-column: auto;
  }

  .page-body--bathroom-panels__properties .page-body__feature-list {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-body--bathroom-panels__decors,
  .page-body--bathroom-panels__planning {
    padding-inline: 20px;
  }
}

/* Native Oak: preserve the legacy centered Bootstrap composition. */
.page-body--native-oak {
  color: #616161;
  font-weight: 300;
}

.page-body--native-oak__section {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  padding-block: 30px;
  width: calc(100% - 26px);
}

.page-body--native-oak__media {
  margin: 0;
  min-width: 0;
}

.page-body--native-oak__media img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--native-oak__intro-copy,
.page-body--native-oak__product-copy {
  min-width: 0;
}

.page-body--native-oak .formatted-text {
  font-weight: 300;
}

.page-body--native-oak .formatted-text p {
  margin-block: 0 1rem;
}

.page-body--native-oak__intro-copy p:first-child,
.page-body--native-oak__product-copy h2:first-child {
  margin-top: 0;
}

.page-body--native-oak__intro-copy p:last-child,
.page-body--native-oak__product-copy .formatted-text > *:last-child {
  margin-bottom: 0;
}

.page-body--native-oak__product-copy h2 {
  color: #000;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

.page-body--native-oak__product-copy ul {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .page-body--native-oak__intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .page-body--native-oak__product--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-body--native-oak__intro-copy,
  .page-body--native-oak__product-copy {
    grid-column: 1;
  }

  .page-body--native-oak__intro .page-body--native-oak__media,
  .page-body--native-oak__product--balanced .page-body--native-oak__media {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 860px) {
  .page-body--native-oak__section {
    padding-block: 60px;
    width: calc(100% - 26px);
  }

  .page-body--native-oak__product--wide-copy {
    align-items: end;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .page-body--native-oak__product--wide-copy .page-body--native-oak__product-copy {
    grid-column: 1;
  }

  .page-body--native-oak__product--wide-copy .page-body--native-oak__media {
    grid-column: 2;
    grid-row: 1;
  }

  .page-body--native-oak__product-copy h2 {
    font-size: min(calc(11.6338px + 0.76757vw), 26.37114025px);
  }
}

@media (min-width: 1300px) {
  .page-body--native-oak__section {
    width: calc(91.666667% - 20px);
  }

  .page-body--native-oak__product--wide-copy {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  }
}

@media (min-width: 1920px) {
  .page-body--native-oak__section {
    width: calc(75% - 20px);
  }

  .page-body--native-oak__product--wide-copy {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .page-body--native-oak__intro .page-body--native-oak__media,
  .page-body--native-oak__product--balanced .page-body--native-oak__media {
    grid-row: 1;
  }
}

/* FLOORING collection 2024 legacy layout parity.
   Scoped by the campaign image directory so other imported pages are unchanged. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"]) {
  color: #616161;
  font-size: clamp(13px, calc(12.57143px + 0.0744vw), 14px);
  font-weight: 300;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"]) h2 {
  color: #000;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"]) .kaindl-copy {
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .kaindl-copy > * + * {
  margin-top: 0;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section.section-spacer {
  padding-block: 30px;
}

/* DE/ES retain the old Bootstrap grid class names. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content .container-fluid {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 15px;
  width: 100%;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content .row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: -15px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content [class*="col-"] {
  box-sizing: border-box;
  grid-column: 1 / -1;
  min-width: 0;
  padding-inline: 15px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content__image {
  margin-bottom: 20px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content__image img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content__section--text {
  margin-bottom: 20px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content__headline {
  margin-top: 0;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .text-image-content .btn,
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col .btn {
  margin-top: 0;
}

/* IT uses the theme's transformed two-column markup. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col:not(.page-body__two-col--photo) {
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  width: 100%;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col:not(.page-body__two-col--photo) > * {
  box-sizing: border-box;
  min-width: 0;
  padding-inline: 15px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col:not(.page-body__two-col--photo) > .page-body__media {
  grid-row: 1;
  margin-bottom: 20px;
}

/* Gray centered CTA bands in both recovered and v1 markup. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section--teaser-banner,
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section:has(> .kaindl-copy > .teaser-banner__headline),
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section:has(.page-body__two-col--photo) {
  align-items: center;
  background: #f5f5f5;
  box-sizing: border-box;
  margin-block: 30px;
  padding: 50px max(20px, calc((100vw - 800px) / 2));
  text-align: center;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section:has(> .kaindl-copy > .teaser-banner__headline)
  > .kaindl-copy,
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col--photo {
  display: block;
  margin-inline: auto;
  max-width: 672px;
  width: 100%;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__two-col--photo > .page-body__media {
  display: none;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__teaser-banner__text,
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .teaser-banner__headline + p {
  margin-bottom: 20px;
}

/* Offset image with the overlapping collection card. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser {
  box-sizing: border-box;
  padding: 15px 0;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__layout {
  max-width: none;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__image-wrapper {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__image {
  height: 100%;
  object-fit: cover;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__box {
  margin-inline: -15px;
  min-height: 0;
  padding: 30px 15px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__box-headline {
  font-size: 20px;
}

/* Legacy download section widths and restrained row treatment. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .page-body__section:has(> .page-body__downloads) {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 15px;
  width: 100%;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__downloads {
  gap: 30px;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__download > a {
  border: 0;
  border-block: 1px solid #d2d2d2;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 12px;
}

@media (max-width: 575px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-1 {
    grid-row: 1;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-2 {
    grid-row: 2;
  }
}

@media (min-width: 576px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .col-sm-6 {
    grid-column-end: span 6;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 6;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content__image {
    margin-bottom: 0;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__two-col:not(.page-body__two-col--photo) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__two-col:not(.page-body__two-col--photo) > .page-body__media {
    grid-column: 2;
    margin-bottom: 0;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser {
    padding: 30px 5px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__media {
    width: 83.333333%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__body {
    margin-left: 33.333333%;
    margin-top: -110px;
    width: 66.666667%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__box {
    margin-inline: 0;
    padding: 30px 20px;
  }
}

@media (min-width: 860px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"]) h2 {
    font-size: clamp(18px, calc(11.6338px + 0.76757vw), 26.37114025px);
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section.section-spacer {
    padding-block: 60px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .col-md-5 {
    grid-column-end: span 5;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .offset-md-1 {
    grid-column-start: 2;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 5;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__two-col:not(.page-body__two-col--photo),
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section:has(> .page-body__downloads) {
    width: 83.333333%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content__section--text {
    margin-bottom: 40px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section--teaser-banner,
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section:has(> .kaindl-copy > .teaser-banner__headline),
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section:has(.page-body__two-col--photo) {
    margin-block: 60px;
    padding-block: 70px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__teaser-banner__text,
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .teaser-banner__headline + p {
    margin-bottom: 40px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser {
    padding-block: 50px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__media {
    margin-left: 8.333333%;
    width: 66.666667%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__body {
    width: 58.333333%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__body {
    margin-top: -180px;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__box {
    padding: 50px 80px;
  }
}

@media (min-width: 1300px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .col-xl-4 {
    grid-column-end: span 4;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .offset-xl-2 {
    grid-column-start: 3;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 4;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__two-col:not(.page-body__two-col--photo),
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section:has(> .page-body__downloads) {
    width: 66.666667%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__body {
    margin-left: 41.666667%;
    width: 50%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__box {
    padding: 75px 120px;
  }
}

@media (min-width: 1920px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .col-xxl-3 {
    grid-column-end: span 3;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .offset-xxl-3 {
    grid-column-start: 4;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 3;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    .page-body__two-col:not(.page-body__two-col--photo),
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .page-body__section:has(> .page-body__downloads) {
    width: 50%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__media {
    margin-left: 16.666667%;
    width: 50%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__body {
    width: 41.666667%;
  }

  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__box {
    padding: 100px 160px;
  }
}

/* Campaign typography corrections for nested reusable components. */
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__teaser-banner__text p,
.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__box-text p {
  color: #616161;
  font-size: inherit;
  line-height: inherit;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  > .collection-teaser .collection-teaser__body {
  max-width: none;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__download__title {
  font-size: inherit;
}

.page-body:has(img[src*="/page-bodies/landingpages--flooring"])
  .page-body__download__meta {
  font-size: 0.85em;
}

@media (min-width: 860px) {
  .page-body:has(img[src*="/page-bodies/landingpages--flooring"])
    > .collection-teaser .collection-teaser__box-headline {
    font-size: clamp(24.487487375px, calc(17.74416px + 1.17072vw), 40.2219223878px);
  }
}

/* Wood Veneers BLACKBACK/FUMAKO teaser repair ----------------------- */

.page-body__collection-teasers {
  background: #efefef;
  box-sizing: border-box;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 50px;
  padding: clamp(2rem, 4vw, 3.25rem) var(--kaindl-gutter);
  position: relative;
  right: 50%;
  width: 100vw;
}

.page-body__collection-teasers-grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
  margin-inline: auto;
  max-width: var(--kaindl-container-max);
  width: 100%;
}

.page-body__collection-teaser {
  background: #fff;
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.page-body__collection-teaser-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.page-body .page-body__collection-teaser-title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.page-body__collection-teaser-subtitle {
  color: #6f6f6f;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.45;
  margin: 1rem 0 0;
}

.page-body__collection-teaser-cta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.page-body__collection-teaser-media {
  margin: 0;
  min-height: 14rem;
  overflow: hidden;
}

.page-body__collection-teaser-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 900px) {
  .page-body__collection-teasers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-body__collection-teaser {
    min-height: clamp(18rem, 24vw, 23rem);
  }

  .page-body__collection-teaser--with-media {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 1fr);
  }
}

/* ROCKO waterproof wall system post-listing content -----------------
   Mirrors the legacy page's narrow editorial column, 30/60px section
   rhythm, carousel stage, download row, FAQ, and video presentation. */
.page-body--rocko-listing {
  --rocko-content-width: min(calc(100% - 2rem), 57.35rem);
}

.page-body--rocko-listing > .page-body__section.section-spacer {
  padding-block: 30px;
}

.page-body--rocko-listing
  > .page-body__section:not(.page-body__content-carousel-section)
  > * {
  box-sizing: border-box;
  width: var(--rocko-content-width);
  margin-inline: auto;
}

.page-body--rocko-listing .page-body__content-carousel {
  width: var(--rocko-content-width);
}

.page-body--rocko-listing .page-body__content-carousel__headline,
.page-body--rocko-listing__video-section > h2,
.page-body--rocko-listing__faq-section > h2 {
  margin-bottom: 1.5em;
}

.page-body--rocko-listing__downloads > h2 {
  margin: 0 0 16px;
}

.page-body--rocko-listing .page-body__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.page-body--rocko-listing .page-body__download {
  width: 100%;
}

.page-body--rocko-listing .page-body__download > a {
  grid-template-columns: 70px minmax(0, 1fr);
  min-height: 110px;
  padding: 20px 12px;
  border: 0;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.page-body--rocko-listing .page-body__download > a::before {
  content: "PDF";
  width: 70px;
  height: 70px;
  padding: 0;
  align-items: center;
  background: transparent;
  border: 2px solid #9b9b9b;
  clip-path: none;
  color: #777;
  font-size: 0.8125rem;
}

.page-body--rocko-listing .page-body__download > a::after {
  display: none;
}

.page-body--rocko-listing .page-body__download__title,
.page-body--rocko-listing .page-body__download__meta {
  grid-column: 2;
}

.page-body--rocko-listing .page-body__download > a:hover,
.page-body--rocko-listing .page-body__download > a:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: none;
  transform: none;
}

.page-body--rocko-listing .page-body__download > a:hover::before,
.page-body--rocko-listing .page-body__download > a:focus-visible::before {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.page-body--rocko-listing .page-body__download > a:hover .page-body__download__meta,
.page-body--rocko-listing .page-body__download > a:focus-visible .page-body__download__meta {
  color: #fff;
}

.page-body--rocko-listing__video-section .page-body__videos {
  max-width: 100%;
}

.page-body--rocko-listing__video-section .page-body__video iframe {
  margin-bottom: 15px;
}

@media (min-width: 640px) {
  .page-body--rocko-listing .page-body__download {
    width: calc(50% - 15px);
  }
}

@media (min-width: 860px) {
  .page-body--rocko-listing > .page-body__section.section-spacer {
    padding-block: 60px;
  }

  .page-body--rocko-listing__video-section .page-body__video iframe {
    margin-bottom: 30px;
  }
}
/* ROCKO lead image: the legacy layout places the large room image above
   the introductory "new generation" copy rather than beside it. */
.page-body--rocko-listing__lead > .page-body__media {
  width: var(--rocko-content-width);
  max-width: none;
  margin: 0 auto clamp(24px, 4vw, 48px);
}

.page-body--rocko-listing__lead > .page-body__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.page-body--rocko-listing__lead > .kaindl-copy {
  width: var(--rocko-content-width);
}
/* Give the ROCKO accessories subsection the same strong visual break in
   every translation without changing other editorial h2 elements. */
.page-body--rocko-listing__accessories-heading {
  margin-top: clamp(48px, 6vw, 80px) !important;
}
/* Hardwood/Softwood BLACKBACK banner: the legacy teaser spans the viewport
   before the decor grid and leaves a fixed 50px break below it. */
.page-body--pre-listing
  > .page-body__section--teaser-banner[data-component="wood-veneers-teasers"] {
  box-sizing: border-box;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-right: -50vw;
  margin-bottom: 50px;
  margin-left: -50vw;
}
/* Doors post-listing restoration -----------------------------------
   Recreates the legacy full-width editorial sequence while keeping the
   copy and FAQ in the original narrow reading column. */
.page-body--doors-listing {
  --doors-content-width: min(calc(100% - 2rem), 57.35rem);
  box-sizing: border-box;
  color: #616161;
  font-size: clamp(0.875rem, 0.84rem + 0.08vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  width: 100vw;
}

.page-body--doors-listing > .page-body__section.section-spacer {
  padding-block: 30px;
}

.page-body--doors-listing__editorial > .kaindl-copy,
.page-body--doors-listing__faq-inner {
  box-sizing: border-box;
  margin-inline: auto;
  width: var(--doors-content-width);
}

.page-body--doors-listing__editorial h2,
.page-body--doors-listing__faq-section h2 {
  color: #000;
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.page-body--doors-listing__editorial .formatted-text p,
.page-body--doors-listing .page-body__faq-item p {
  margin: 0;
}

.page-body--doors-listing__collection.content-element {
  padding-block: 30px;
}

.page-body--doors-listing__collection .collection-teaser__layout {
  max-width: min(calc(100% - 2rem), 91.875rem);
}

.page-body--doors-listing__collection .collection-teaser__image-wrapper {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.page-body--doors-listing__collection .collection-teaser__image {
  height: 100%;
  object-fit: cover;
}

.page-body--doors-listing__collection .collection-teaser__box {
  background: #f5f5f5;
}

.page-body--doors-listing__collection .collection-teaser__box-headline {
  text-transform: none;
}

.page-body--doors-listing__studio {
  align-items: center;
  background: #f5f5f5;
  box-sizing: border-box;
  margin-block: 30px;
  padding: 50px max(1rem, calc((100vw - 50rem) / 2));
  text-align: center;
}

.page-body--doors-listing__studio .page-body__teaser-banner {
  width: 100%;
}

.page-body--doors-listing__studio .page-body__teaser-banner__headline {
  margin: 0;
}

.page-body--doors-listing__studio .page-body__teaser-banner__cta {
  margin-top: 24px;
}

.page-body--doors-listing__faq-section {
  padding-bottom: 60px !important;
}

.page-body--doors-listing__faq-section h2 {
  margin-bottom: 1.5em;
}

.page-body--doors-listing .page-body__faq {
  border-top-color: #d2d2d2;
}

.page-body--doors-listing .page-body__faq-item {
  border-bottom-color: #d2d2d2;
}

.page-body--doors-listing .page-body__faq-item > summary {
  color: #000;
  padding-block: 20px;
}

.page-body--doors-listing .page-body__faq-item > summary h3 {
  font-size: 1rem;
  line-height: 1.4;
}

.page-body--doors-listing .page-body__faq-item > summary::after {
  color: #000;
  content: "\203A";
  font-size: 1.75rem;
  font-weight: 300;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

.page-body--doors-listing .page-body__faq-item[open] > summary::after {
  content: "\203A";
  transform: rotate(90deg);
}

.page-body--doors-listing .page-body__faq-item > .kaindl-copy {
  padding-bottom: 24px;
}

@media (min-width: 860px) {
  .page-body--doors-listing > .page-body__section.section-spacer {
    padding-block: 60px;
  }

  .page-body--doors-listing__collection.content-element {
    padding-block: 60px;
  }

  .page-body--doors-listing__studio {
    margin-block: 60px;
    padding-block: 70px;
  }

  .page-body--doors-listing__studio .page-body__teaser-banner__cta {
    margin-top: 40px;
  }

  .page-body--doors-listing__faq-section {
    padding-bottom: 120px !important;
  }
}

@media (min-width: 1300px) {
  .page-body--doors-listing {
    --doors-content-width: min(66.666667%, 57.35rem);
  }
}

@media (min-width: 1920px) {
  .page-body--doors-listing {
    --doors-content-width: min(50%, 57.35rem);
  }
}
/* Trade & Industry contact CTA: full-bleed grey band. */
.page-body__section--contact-cta {
  align-items: center;
  background: #f5f5f5;
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  padding: clamp(3rem, 5vw, 4.375rem) max(var(--kaindl-gutter), calc((100vw - 42rem) / 2));
  text-align: center;
  width: 100vw;
}

.page-body__section--contact-cta > .kaindl-copy {
  margin-inline: auto;
  max-width: 42rem;
  width: 100%;
}
/* Technical Downloads FLOORS: compact, borderless QNG-ready logo. */
.page-body__two-col--photo
  > figure.page-body__media:has(
    > img[src$="/service-knowledge--downloads--technical-downloads-floors/f7a7d5125ebff96e.png"]
  ) {
  align-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  height: auto;
  justify-self: center;
  max-width: 21rem;
  min-height: 0;
  overflow: visible;
  width: 100%;
}

.page-body__two-col--photo
  > figure.page-body__media
  > img[src$="/service-knowledge--downloads--technical-downloads-floors/f7a7d5125ebff96e.png"] {
  border: 0;
  box-shadow: none;
  height: auto;
  margin-inline: auto;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}
/* Innovations: retain the legacy image-first editorial layout. */
.page-body--innovations > .page-body__section {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 57.35rem;
  width: 100%;
}

.page-body--innovations > .page-body__innovations-heading {
  padding-bottom: 0;
}

.page-body--innovations > .page-body__innovation {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body--innovations .page-body__innovation-media {
  margin: 0;
  width: 100%;
}

.page-body--innovations .page-body__innovation-media img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--innovations .page-body__innovation-copy {
  max-width: none;
  width: 100%;
}

.page-body--innovations .page-body__innovation-copy > h2:first-child {
  margin-top: 0;
}

/* Company history: keep each legacy milestone paired with its image. */
.page-body--history > .page-body__history-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-inline: auto;
  max-width: 57.35rem;
  width: 100%;
}

.page-body--history .page-body__history-media {
  margin: 0;
  width: 100%;
}

.page-body--history .page-body__history-media img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--history .page-body__history-copy {
  max-width: none;
  width: 100%;
}

.page-body--history .page-body__history-copy > h2:first-child {
  margin-top: 0;
}

/* People at Kaindl: reproduce the compact legacy testimonial slider. */
.page-body--people-at-kaindl > .page-body__people-testimonials {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 72rem;
  width: 100%;
}

.page-body--people-at-kaindl .page-body__people-testimonials > h2 {
  margin: 0 0 clamp(1.75rem, 3vw, 3rem);
}

.page-body--people-at-kaindl .page-body__testimonials-slider.swiper {
  max-width: 100%;
  padding-top: clamp(4.5rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* The old component has one quote icon for the slider, rather than a
   decorative glyph behind every testimonial. */
.page-body--people-at-kaindl .page-body__testimonials-slider.swiper::before {
  color: var(--kaindl-color-primary, #003b63);
  content: "\201C";
  font-family: "Times New Roman", Times, ui-serif, Georgia, serif;
  font-size: clamp(6rem, 8vw, 8rem);
  font-weight: 400;
  left: 0;
  line-height: 0.8;
  opacity: 0.22;
  pointer-events: none;
  position: absolute;
  top: 0.1em;
}

.page-body--people-at-kaindl .page-body__testimonials > li::before {
  content: none;
}

.page-body--people-at-kaindl .page-body__testimonials > li {
  gap: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem);
}

.page-body--people-at-kaindl .page-body__testimonials blockquote {
  font-size: clamp(1rem, 0.94rem + 0.18vw, 1.125rem);
  line-height: 1.55;
  max-width: none;
}

.page-body--people-at-kaindl .page-body__testimonials > li figure {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
}

.page-body--people-at-kaindl .page-body__testimonials > li figure::after {
  display: none;
}

.page-body--people-at-kaindl .page-body__testimonials figcaption {
  grid-column: 2;
}

.page-body--people-at-kaindl .page-body__testimonials > li figure img {
  filter: none;
}

.page-body--people-at-kaindl > .page-body__people-career {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

@media (max-width: 639px) {
  .page-body--people-at-kaindl .page-body__testimonials:not(.swiper-wrapper) {
    padding-top: 4rem;
  }
}

/* Italian job-offers parity ------------------------------------------ */
.page-body--job-offers-it-parity
  > :is(
    .page-body__job-offers-feature,
    .page-body__job-offers-intro,
    .page-body__job-offers-vacancies
  ) {
  align-self: center;
  max-width: none;
  width: 100%;
}

.page-body--job-offers-it-parity .page-body__job-offers-feature-media {
  line-height: 0;
  margin: 0;
  width: 100%;
}

.page-body--job-offers-it-parity .page-body__job-offers-feature-media img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--stacked
  .page-body__job-offers-feature-content {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--stacked
  .page-body__job-offers-feature-content > .btn {
  justify-self: start;
}

.page-body--job-offers-it-parity .page-body__job-offers-feature--split {
  display: grid;
  gap: 1.25rem;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--split
  .page-body__job-offers-feature-media {
  grid-row: 1;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--split
  .kaindl-copy > .btn {
  margin-top: 2rem;
}

.page-body--job-offers-it-parity > .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

/* The legacy vacancy body flows its three snippets through two newspaper
   columns; retaining the wrapper also keeps each snippet from splitting. */
.page-body--job-offers-it-parity
  .page-body__job-offers-vacancies
  .page-body__faq-item > .kaindl-copy {
  display: block;
}

.page-body--job-offers-it-parity
  .job-list__item-intro + .job-list__item-description {
  margin-top: 3em;
}

.page-body--job-offers-it-parity
  .job-list__item-description-snippet {
  break-inside: avoid;
  margin-bottom: 1.5em;
  page-break-inside: avoid;
}

.page-body--job-offers-it-parity .page-body__job-apply {
  margin-top: 2rem;
}

@media (min-width: 576px) {
  .page-body--job-offers-it-parity .page-body__job-offers-feature--split {
    align-items: center;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-body--job-offers-it-parity
    .page-body__job-offers-feature--split
    .kaindl-copy {
    padding-right: clamp(2rem, 5vw, 5rem);
  }

  .page-body--job-offers-it-parity
    .page-body__job-offers-feature--split
    .page-body__job-offers-feature-media {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 768px) {
  .page-body--job-offers-it-parity
    > :is(
      .page-body__job-offers-feature,
      .page-body__job-offers-intro,
      .page-body__job-offers-vacancies
    ) {
    width: 83.333333%;
  }

  .page-body--job-offers-it-parity
    .page-body__job-offers-feature--stacked
    .page-body__job-offers-feature-content {
    align-items: end;
    gap: 1.875rem;
    grid-template-columns: 2fr 1fr;
    margin-top: 1.875rem;
  }

  .page-body--job-offers-it-parity
    .page-body__job-offers-feature--stacked
    .page-body__job-offers-feature-content > .btn {
    justify-self: end;
  }

  .page-body--job-offers-it-parity
    .job-list__item-description--columns {
    column-count: 2;
    column-gap: 30px;
  }
}

@media (min-width: 1200px) {
  .page-body--job-offers-it-parity
    > :is(
      .page-body__job-offers-feature,
      .page-body__job-offers-intro,
      .page-body__job-offers-vacancies
    ) {
    width: 66.666667%;
  }
}

@media (min-width: 1400px) {
  .page-body--job-offers-it-parity
    > :is(
      .page-body__job-offers-feature,
      .page-body__job-offers-intro,
      .page-body__job-offers-vacancies
    ) {
    width: 50%;
  }
}
/* Italian job-offers measured legacy geometry */
.page-body--job-offers-it-parity {
  font-size: 13px;
  line-height: 1.7;
  font-weight: 200;
}

.page-body--job-offers-it-parity
  > .page-body__section.section-spacer:not(.page-body__job-list) {
  padding-block: 60px;
}

.page-body--job-offers-it-parity
  > .page-body__scope-nav-section.section-spacer {
  padding-block: 50px;
}

.page-body--job-offers-it-parity h2,
.page-body--job-offers-it-parity .page-body__job-list > h2 {
  font-size: 16.055px;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.page-body--job-offers-it-parity .page-body__job-list > h2 {
  margin-bottom: 1.5em;
}

.page-body--job-offers-it-parity .page-body__faq-item > summary,
.page-body--job-offers-it-parity
  .page-body__faq-item > summary > h3 {
  font-size: 16.055px;
  line-height: 1.2;
}

.page-body--job-offers-it-parity .btn--regular,
.page-body--job-offers-it-parity .page-body__teaser-banner .btn {
  font-size: 11px;
  line-height: 1.7;
  min-height: 44px;
  padding: 1.1em 1.4em 1.2em;
}

.page-body--job-offers-it-parity .btn--secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1px #d2d2d2;
  color: #000;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--stacked
  .page-body__job-offers-feature-content {
  margin-top: 30px;
}

.page-body--job-offers-it-parity .page-body__job-offers-feature--split {
  gap: 30px;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--split
  .kaindl-copy {
  padding-right: 0;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature--split
  .kaindl-copy > .btn {
  margin-top: 40px;
}

.page-body--job-offers-it-parity > .page-body__section--teaser-banner {
  margin-block: 60px;
}

.page-body--job-offers-it-parity
  > .page-body__section--teaser-banner
  .page-body__teaser-banner {
  max-width: none;
  width: calc(33.333333% - 16px);
}

@media screen and (min-width: 576px) {
  .page-body--job-offers-it-parity {
    font-size: calc(12.57143px + 0.0744vw);
  }

  .page-body--job-offers-it-parity h2,
  .page-body--job-offers-it-parity .page-body__job-list > h2 {
    font-size: calc(11.6338px + 0.76757vw);
  }

  .page-body--job-offers-it-parity .page-body__faq-item > summary,
  .page-body--job-offers-it-parity
    .page-body__faq-item > summary > h3 {
    font-size: calc(15.52571px + 0.09189vw);
  }
}

@media screen and (min-width: 1920px) {
  .page-body--job-offers-it-parity {
    font-size: 14px;
  }

  .page-body--job-offers-it-parity h2,
  .page-body--job-offers-it-parity .page-body__job-list > h2 {
    font-size: 26.37114025px;
  }

  .page-body--job-offers-it-parity .page-body__faq-item > summary,
  .page-body--job-offers-it-parity
    .page-body__faq-item > summary > h3 {
    font-size: 17.29px;
  }

  .page-body--job-offers-it-parity
    > :is(
      .page-body__job-offers-feature,
      .page-body__job-offers-intro,
      .page-body__job-offers-vacancies
    ) {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .page-body--job-offers-it-parity
    > :is(
      .page-body__job-offers-feature,
      .page-body__job-offers-intro,
      .page-body__job-offers-vacancies
    ) {
    width: 66.666667%;
  }
}
/* Italian job-offers final measured alignment */
.page-body--job-offers-it-parity
  > :is(
    .page-body__job-offers-feature,
    .page-body__job-offers-intro,
    .page-body__job-offers-vacancies
  ) {
  margin-inline: auto;
}

.page-body--job-offers-it-parity
  > .page-body__scope-nav-section.page-body__section.section-spacer {
  padding-block: 50px;
}

.page-body--job-offers-it-parity .page-body__scope-nav-list {
  padding-bottom: 0;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-feature-content
  .kaindl-copy > :last-child,
.page-body--job-offers-it-parity
  .page-body__job-offers-intro
  .kaindl-copy > :last-child {
  margin-bottom: 0;
}

.page-body--job-offers-it-parity .btn.btn--secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1px #d2d2d2;
  color: #000;
}

.page-body--job-offers-it-parity .btn.btn--regular,
.page-body--job-offers-it-parity .page-body__teaser-banner .btn {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
}

.page-body--job-offers-it-parity
  > .page-body__section--teaser-banner
  .page-body__teaser-banner {
  display: block;
  text-align: center;
}

.page-body--job-offers-it-parity
  > .page-body__section--teaser-banner
  .page-body__teaser-banner__headline {
  font-size: 16.055px;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.page-body--job-offers-it-parity
  > .page-body__section--teaser-banner
  .page-body__teaser-banner__text {
  margin-bottom: 20px;
}

.page-body--job-offers-it-parity .page-body__job-offers-vacancies {
  font-size: 13px;
  line-height: 1.7;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-vacancies
  .page-body__faq-item > summary {
  align-content: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  min-height: 97px;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-vacancies
  .page-body__faq-item > summary > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-vacancies
  .page-body__faq-item__meta {
  grid-column: 1;
  grid-row: 2;
}

.page-body--job-offers-it-parity
  .page-body__job-offers-vacancies
  .page-body__faq-item > summary::after {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / 3;
}

@media screen and (min-width: 576px) {
  .page-body--job-offers-it-parity
    > .page-body__section--teaser-banner
    .page-body__teaser-banner__headline {
    font-size: calc(11.6338px + 0.76757vw);
  }

  .page-body--job-offers-it-parity
    > .page-body__section--teaser-banner
    .page-body__teaser-banner__text {
    margin-bottom: 40px;
  }

  .page-body--job-offers-it-parity .page-body__job-offers-vacancies {
    font-size: calc(12.57143px + 0.0744vw);
  }
}

@media screen and (min-width: 1920px) {
  .page-body--job-offers-it-parity
    > .page-body__section--teaser-banner
    .page-body__teaser-banner__headline {
    font-size: 26.37114025px;
  }

  .page-body--job-offers-it-parity .page-body__job-offers-vacancies {
    font-size: 14px;
  }
}

/* Entity + FLOORING collection 2025 legacy layout parity --------------
   Both pages use one canonical source key across EN, DE, ES and IT. The
   node preprocess exposes that key as a page-source class, allowing the old
   site's measured content width, type scale and vertical rhythm to be
   restored without locale/path selectors. */
:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body {
  box-sizing: border-box;
  color: #111;
  font-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  font-weight: 200;
  line-height: 1.7;
  margin-inline: auto;
  width: min(100%, 57.35rem);
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body h3 {
  font-size: clamp(0.95rem, 0.9rem + 0.12vw, 1.055rem);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body > .page-body__section.section-spacer {
  padding-block: 60px;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body .kaindl-copy {
  font-size: inherit;
  line-height: inherit;
  max-width: none;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body .kaindl-copy > * + * {
  margin-bottom: 0;
  margin-top: 0;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body .kaindl-copy p {
  margin: 0;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body__two-col {
  align-items: start;
  gap: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body__media {
  margin: 0;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body__media img {
  height: auto;
  width: 100%;
}

:is(.page-source--entity, .page-source--flooring-collection-2025)
  .page-body .kaindl-copy .btn {
  margin-top: 40px;
}

/* The old collection's sustainability/health banners span the viewport,
   while their copy remains a centered half-column. */
.page-source--flooring-collection-2025
  .page-body > .page-body__section:has(.teaser-banner__headline) {
  align-items: center;
  box-sizing: border-box;
  margin-block: 60px;
  margin-inline: calc(50% - 50vw);
  padding-block: 70px;
  width: 100vw;
}

.page-source--flooring-collection-2025
  .page-body > .page-body__section:has(.teaser-banner__headline)
  > .kaindl-copy {
  width: min(calc(100% - 32px), 27.875rem);
}

.page-source--flooring-collection-2025
  .page-body > .page-body__section:has(.teaser-banner__headline)
  .btn {
  margin-inline: auto;
}

@media (max-width: 767px) {
  :is(.page-source--entity, .page-source--flooring-collection-2025)
    .page-body > .page-body__section.section-spacer {
    padding-block: 30px;
  }

  :is(.page-source--entity, .page-source--flooring-collection-2025)
    .page-body__two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-source--flooring-collection-2025
    .page-body > .page-body__section:has(.teaser-banner__headline) {
    margin-block: 30px;
    padding-block: 50px;
  }
}

/**
 * Blackback editorial landing page.
 *
 * The legacy route is stored as a product_listing, but its visible body is a
 * narrow editorial sequence. Everything is scoped to the targeted import.
 */
.page-body--blackback {
  --blackback-content-width: min(calc(100% - 30px), 952px);
  color: #616161;
  font-size: clamp(0.8125rem, 0.78rem + 0.08vw, 0.875rem);
  font-weight: 300;
  line-height: 1.7;
  overflow: visible;
}

.page-body--blackback > .page-body__section {
  box-sizing: border-box;
  margin-inline: auto;
  width: var(--blackback-content-width);
}

.page-body--blackback h2 {
  color: #111;
  font-size: clamp(1.125rem, 0.76rem + 0.78vw, 1.45rem);
  line-height: 1.2;
  margin: 0 0 clamp(1.75rem, 2.5vw, 2.2rem);
}

.page-body--blackback__lead,
.page-body--blackback__features {
  padding-block: 60px;
}

.page-body--blackback__lead .page-body__two-col {
  align-items: stretch;
  gap: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
}

.page-body--blackback__lead .kaindl-copy {
  box-sizing: border-box;
  padding-right: clamp(30px, 5vw, 76px);
}

.page-body--blackback__lead .formatted-text p {
  margin: 0 0 1.5em;
}

.page-body--blackback__lead .formatted-text p:last-child {
  margin-bottom: 0;
}

.page-body--blackback__lead .page-body__media,
.page-body--blackback__lead .page-body__media img {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}

.page-body--blackback__lead .page-body__media img {
  object-fit: cover;
}

.page-body--blackback__downloads {
  padding-bottom: 40px;
}

.page-body--blackback__downloads .page-body__downloads {
  display: block;
}

.page-body--blackback__downloads .page-body__download {
  width: 50%;
}

.page-body--blackback__downloads .page-body__download > a {
  background: transparent;
  border: 0;
  border-block: 1px solid #d2d2d2;
  border-radius: 0;
  box-shadow: none;
  column-gap: 15px;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 20px 0;
}

.page-body--blackback__downloads .page-body__download > a::before {
  align-items: center;
  align-self: stretch;
  background: #111;
  color: #fff;
  content: "PDF";
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 70px;
}

.page-body--blackback__downloads .page-body__download__title {
  color: #111;
  font-weight: 700;
}

.page-body--blackback__downloads .page-body__download__language,
.page-body--blackback__downloads .page-body__download__meta {
  grid-column: 2;
}

.page-body--blackback__downloads .page-body__download__meta {
  color: #111;
  font-weight: 700;
}

.page-body--blackback__features .page-body__feature-list {
  column-gap: 60px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 60px;
}

.page-body--blackback__features .page-body__feature-list__item {
  column-gap: 30px;
  grid-template-columns: 60px minmax(0, 1fr);
}

.page-body--blackback__features .page-body__feature-list__icon {
  height: 60px;
  width: 60px;
}

.page-body--blackback__features .page-body__feature-list__body h3 {
  color: #111;
  font-size: clamp(0.95rem, 0.9rem + 0.1vw, 1.02rem);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.page-body--blackback__features .page-body__feature-list__body p {
  margin: 0;
}

.page-body--blackback__features .page-body__feature-list__body a {
  color: #111;
  text-decoration: underline;
}

.page-body--blackback__products {
  padding-block: 60px 70px;
}

.page-body--blackback__products .page-body__promo-grid {
  column-gap: 30px;
  row-gap: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.page-body--blackback__products .page-body__promo-card {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
}

.page-body--blackback__products .page-body__promo-card-copy,
.page-body--blackback__products .page-body__promo-card-media {
  aspect-ratio: 1;
}

.page-body--blackback__products .page-body__promo-card-copy {
  background: #f5f5f5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 3vw, 45px);
}

.page-body--blackback__products .page-body__promo-card--copy-only .page-body__promo-card-copy {
  aspect-ratio: 2 / 1;
  grid-column: 1 / -1;
}

.page-body--blackback__products .page-body__promo-card-heading,
.page-body--blackback__products .page-body__promo-card-copy strong,
.page-body--blackback__products .page-body__promo-card-copy span {
  display: block;
}

.page-body--blackback__products .page-body__promo-card-copy strong {
  color: #111;
  font-size: clamp(1.25rem, 1rem + 0.45vw, 1.55rem);
  line-height: 1.15;
  text-transform: none;
}

.page-body--blackback__products .page-body__promo-card-copy .page-body__promo-card-heading > span {
  color: #8a8a8a;
  font-size: clamp(0.9rem, 0.84rem + 0.1vw, 1rem);
  line-height: 1.35;
  margin-top: 0.45rem;
}

.page-body--blackback__products .page-body__promo-card-cta {
  align-items: center;
  align-self: flex-start;
  border: 1px solid #111;
  color: #111;
  display: inline-flex;
  flex-direction: row;
  font-size: 11px;
  gap: 1rem;
  line-height: 1;
  padding: 13px 15px;
}

.page-body--blackback__products .page-body__promo-card-media img {
  object-fit: cover;
}

.page-body--blackback__fumako.page-body__section--teaser-banner {
  left: 50%;
  margin: 0 0 0 -50vw;
  max-width: none;
  padding-block: 70px;
  position: relative;
  width: 100vw;
}

.page-body--blackback__fumako .page-body__teaser-banner {
  max-width: 446px;
}

.page-body--blackback__fumako .page-body__teaser-banner__text {
  margin-top: 0.7rem;
}

.page-body--blackback__fumako .page-body__teaser-banner__cta {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .page-body--blackback__lead,
  .page-body--blackback__features {
    padding-block: 30px;
  }

  .page-body--blackback__lead .page-body__two-col {
    grid-template-columns: 1fr;
  }

  .page-body--blackback__lead .kaindl-copy {
    padding: 0 0 30px;
  }

  .page-body--blackback__lead .page-body__media img {
    height: auto;
  }

  .page-body--blackback__downloads .page-body__download {
    width: 100%;
  }

  .page-body--blackback__features .page-body__feature-list {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .page-body--blackback__features .page-body__feature-list__item {
    column-gap: 20px;
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .page-body--blackback__features .page-body__feature-list__icon {
    height: 50px;
    width: 50px;
  }

  .page-body--blackback__products {
    padding-block: 30px;
  }

  .page-body--blackback__products .page-body__promo-grid {
    grid-template-columns: 1fr;
  }

  .page-body--blackback__products .page-body__promo-card--copy-only {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .page-body--blackback__products .page-body__promo-card,
  .page-body--blackback__products .page-body__promo-card--copy-only {
    grid-template-columns: 1fr;
  }

  .page-body--blackback__products .page-body__promo-card--copy-only .page-body__promo-card-copy {
    aspect-ratio: 1 / 2;
    min-height: 0;
  }
}

/* Spanish imprint --------------------------------------------------- */

.page-body--imprint > .page-body__section {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
}

.page-body--imprint .kaindl-copy {
  color: var(--kaindl-color-text);
  font-weight: 300;
  max-width: none;
}

.page-body--imprint .kaindl-copy > h2:first-child {
  color: var(--kaindl-color-dark, #000);
  margin-top: 0;
}

.page-body--imprint .formatted-text > p,
.page-body--imprint .formatted-text > ul {
  margin: 0 0 1.5em;
}

.page-body--imprint .formatted-text > :last-child {
  margin-bottom: 0;
}

.page-body--imprint .formatted-text strong {
  color: var(--kaindl-color-dark, #000);
  font-weight: 700;
}

@media (min-width: 768px) {
  .page-body--imprint > .page-body__section {
    width: 83.333333%;
  }
}

@media (min-width: 1200px) {
  .page-body--imprint > .page-body__section {
    width: 66.666667%;
  }
}

@media (min-width: 1600px) {
  .page-body--imprint > .page-body__section {
    width: 50%;
  }
}

/* Responsive replacement for the legacy space-aligned income columns. */
.page-body--apprenticeship-income .page-body__faq {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body--apprenticeship-income .page-body__faq-item > .kaindl-copy {
  max-width: 56rem;
}

.page-body--apprenticeship-income .page-body__income-table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.page-body--apprenticeship-income .page-body__income-table th,
.page-body--apprenticeship-income .page-body__income-table td {
  padding: 0.65rem clamp(0.5rem, 1.5vw, 1rem);
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.page-body--apprenticeship-income .page-body__income-table thead th {
  color: var(--kaindl-color-text);
  font-weight: 700;
  white-space: nowrap;
}

.page-body--apprenticeship-income .page-body__income-table tbody th {
  width: 33%;
  color: var(--kaindl-color-text);
  font-weight: 700;
  white-space: nowrap;
}

.page-body--apprenticeship-income .page-body__income-table--single {
  max-width: 36rem;
}

.page-body--apprenticeship-income .page-body__income-note {
  margin-top: 1.5rem;
}

.page-body--apprenticeship-income
  .page-body__feature-list--income-contact
  a {
  color: inherit;
}

@media (max-width: 559px) {
  .page-body--apprenticeship-income .page-body__income-table {
    font-size: 0.875rem;
  }

  .page-body--apprenticeship-income .page-body__income-table th,
  .page-body--apprenticeship-income .page-body__income-table td {
    padding-inline: 0.35rem;
  }
}
.page-body--apprenticeship-income .page-body__income-benefits-media img {
  width: 80%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* Italian FUMAKO editorial landing page: legacy TYPO3 column widths and rhythm. */
.page-body--fumako {
  color: #616161;
  font-size: clamp(0.8125rem, 0.78rem + 0.08vw, 0.875rem);
  font-weight: 200;
  line-height: 1.7;
  overflow: visible;
}

.page-body--fumako > .page-body__section {
  box-sizing: border-box;
}

.page-body--fumako__lead,
.page-body--fumako__downloads,
.page-body--fumako__reference {
  margin-inline: auto;
  width: min(calc(100% - 30px), 952px);
}

.page-body--fumako h2 {
  color: #111;
  font-size: clamp(1.125rem, 0.76rem + 0.78vw, 1.45rem);
  line-height: 1.2;
}

.page-body--fumako__lead,
.page-body--fumako__reference {
  padding-block: 60px;
}

.page-body--fumako__lead .page-body__two-col {
  align-items: start;
  gap: 30px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
}

.page-body--fumako__lead .formatted-text > p {
  margin: 0 0 1.5em;
}

.page-body--fumako__lead .formatted-text > h2 {
  margin: 40px 0 0.5em;
}

.page-body--fumako__lead .page-body__media,
.page-body--fumako__lead .page-body__media img {
  display: block;
  margin: 0;
  width: 100%;
}

.page-body--fumako__lead .page-body__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-body--fumako__downloads {
  padding-bottom: 40px;
}

.page-body--fumako__downloads > h2 {
  margin: 0 0 1rem;
}

.page-body--fumako__downloads .page-body__downloads {
  display: block;
}

.page-body--fumako__downloads .page-body__download {
  width: 50%;
}

.page-body--fumako__downloads .page-body__download > a {
  background: transparent;
  border: 0;
  border-block: 1px solid #d2d2d2;
  border-radius: 0;
  box-shadow: none;
  column-gap: 15px;
  grid-template-columns: 50px minmax(0, 1fr);
  min-height: 70px;
  padding: 20px 0;
}

.page-body--fumako__downloads .page-body__download > a::before {
  align-items: center;
  align-self: stretch;
  background: #111;
  color: #fff;
  content: "PDF";
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 70px;
}

.page-body--fumako__downloads .page-body__download__title {
  color: #111;
  font-weight: 700;
}

.page-body--fumako__downloads .page-body__download__language,
.page-body--fumako__downloads .page-body__download__meta {
  grid-column: 2;
}

.page-body--fumako__downloads .page-body__download__meta {
  color: #111;
  font-weight: 700;
}

.page-body--fumako__oakwood {
  margin-block: 60px;
}

.page-body--fumako__reference {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-body--fumako__reference-media,
.page-body--fumako__reference-media img {
  display: block;
  margin: 0;
  width: 100%;
}

.page-body--fumako__reference-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-body--fumako__reference-footer {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
}

.page-body--fumako__reference-footer .kaindl-copy {
  max-width: none;
}

.page-body--fumako__reference-footer h2 {
  margin: 0 0 0.5em;
}

.page-body--fumako__reference-footer p {
  margin: 0;
}

.page-body--fumako__reference-cta {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}

.page-body--fumako__blackback.page-body__section--teaser-banner {
  left: 50%;
  margin: 0 0 0 -50vw;
  max-width: none;
  padding-block: 70px;
  position: relative;
  width: 100vw;
}

.page-body--fumako__blackback .page-body__teaser-banner {
  max-width: 446px;
}

.page-body--fumako__blackback .page-body__teaser-banner__text {
  margin-top: 0.7rem;
}

.page-body--fumako__blackback .page-body__teaser-banner__cta {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .page-body--fumako__lead,
  .page-body--fumako__reference {
    padding-block: 30px;
  }

  .page-body--fumako__lead .page-body__two-col,
  .page-body--fumako__reference-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-body--fumako__lead .page-body__media {
    order: -1;
  }

  .page-body--fumako__downloads .page-body__download {
    width: 100%;
  }

  .page-body--fumako__oakwood {
    margin-block: 30px;
  }

  .page-body--fumako__reference-cta {
    justify-content: flex-start;
  }

  .page-body--fumako__blackback.page-body__section--teaser-banner {
    padding-block: 50px;
  }
}
/* German black-kitchen landing page parity. */
.page-body--black-kitchen-de {
  overflow: visible;
}

/* TYPO3's grey teaser bands span the viewport, while their inner content
   remains constrained by the shared teaser component. */
.page-body--black-kitchen-de > .page-body__section--teaser-banner {
  box-sizing: border-box;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

/* Legacy content-carousel labels are centered beneath their active image. */
.page-body--black-kitchen-de .page-body__content-carousel__label,
.page-body--black-kitchen-de .page-body__content-carousel__label-title,
.page-body--black-kitchen-de .page-body__content-carousel__label-text {
  text-align: center;
}

.page-body--black-kitchen-de .page-body__content-carousel__label-text {
  margin-inline: auto;
}

/* Flooring and worktop blocks use the old responsive Bootstrap column map:
   image first on phones, then text left and image right from 576px upward. */
.page-body--black-kitchen-de__split {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.page-body--black-kitchen-de__split > .kaindl-copy,
.page-body--black-kitchen-de__split .text-image-content,
.page-body--black-kitchen-de__split .container-fluid {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

.page-body--black-kitchen-de__split .container-fluid {
  padding-inline: 15px;
}

.page-body--black-kitchen-de__split .text-image-content .row {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: -15px;
}

.page-body--black-kitchen-de__split .text-image-content [class*="col-"] {
  box-sizing: border-box;
  grid-column: 1 / -1;
  min-width: 0;
  padding-inline: 15px;
}

.page-body--black-kitchen-de__split .text-image-content .order-1 {
  grid-row: 1;
}

.page-body--black-kitchen-de__split .text-image-content .order-2 {
  grid-row: 2;
}

.page-body--black-kitchen-de__split .text-image-content__image {
  margin-bottom: 30px;
}

.page-body--black-kitchen-de__split .text-image-content__image img {
  display: block;
  height: auto;
  width: 100%;
}

.page-body--black-kitchen-de__split
  .text-image-content__section--text
  .formatted-text
  > h3:first-child {
  margin-top: 0;
}

/* The old tips component is an image row followed by a same-width text row,
   not a two-column block. */
.page-body--black-kitchen-de__tips {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.page-body--black-kitchen-de__tips > .page-body__two-col {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  width: 100%;
}

.page-body--black-kitchen-de__tips .page-body__media {
  margin: 0;
  order: -1;
}

.page-body--black-kitchen-de__tips .page-body__media img {
  display: block;
  height: auto;
  max-height: none;
  object-fit: cover;
  width: 100%;
}

.page-body--black-kitchen-de__tips > .page-body__two-col > .kaindl-copy {
  max-width: none;
}

@media (min-width: 576px) {
  .page-body--black-kitchen-de__split .text-image-content .order-2.order-sm-1 {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .page-body--black-kitchen-de__split .text-image-content .order-1.order-sm-2 {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .page-body--black-kitchen-de__split .text-image-content__image {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .page-body--black-kitchen-de__split .text-image-content .col-md-5.offset-md-1 {
    grid-column: 2 / span 5;
  }

  .page-body--black-kitchen-de__split .text-image-content .col-md-5:not(.offset-md-1) {
    grid-column: 7 / span 5;
  }

  .page-body--black-kitchen-de__tips > .page-body__two-col {
    width: 83.333333%;
  }
}

@media (min-width: 1200px) {
  .page-body--black-kitchen-de__split .text-image-content .col-xl-4.offset-xl-2 {
    grid-column: 2 / span 5;
  }

  .page-body--black-kitchen-de__split .text-image-content .col-xl-4:not(.offset-xl-2) {
    grid-column: 7 / span 5;
  }

  .page-body--black-kitchen-de__tips > .page-body__two-col {
    width: 83.333333%;
  }
}

@media (min-width: 1440px) {
  .page-body--black-kitchen-de__split .text-image-content .col-xxl-3.offset-xxl-3 {
    grid-column: 3 / span 4;
  }

  .page-body--black-kitchen-de__split .text-image-content .col-xxl-3:not(.offset-xxl-3) {
    grid-column: 7 / span 4;
  }

  .page-body--black-kitchen-de__tips > .page-body__two-col {
    width: 66.666667%;
  }
}