/*
 * Internal-page sections: a reading column that lets wide images break out to
 * the full container width, plus the full-bleed and form variants.
 */

.page-band__body,
.page-band__form-intro {
  --page-band-measure: var(--content-width-reading);
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [content-start] fit-content(var(--page-band-measure)) [content-end]
    minmax(0, 1fr) [full-end];
}

/* Fact lists and reference copy read better than prose at a wider measure. */
.page-band__body--wide { --page-band-measure: var(--content-width-l); }

/*
 * Two columns match how the previous site set long enumerations and
 * reference copy. The whole flow splits, so the grid measure is replaced by a
 * plain block that the column algorithm can work on.
 */
.page-band__body--two-columns {
  display: block;
  width: min(100%, var(--page-band-measure));
  margin-inline: auto;
  columns: 2 20rem;
  column-gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

/* Lists have to be breakable, or the whole list stays in one column. */
.page-band__body--two-columns > :where(p, h2, h3, h4, blockquote) { break-inside: avoid; }
.page-band__body--two-columns li { break-inside: avoid; }
.page-band__body--two-columns > :where(h2, h3, h4) { break-after: avoid; }
.page-band__body--two-columns > :where(figure, .caption, .captionb) { column-span: all; }

.page-band__body--after-cards { margin-top: clamp(var(--space-l), 3.5vw, var(--space-xl)); }
.page-band__body--after-cards:has(.card-row-quote) { margin-top: clamp(var(--space-2xl), 6vw, var(--space-3xl)); }

.page-band__body--after-cards .card-row-quote {
  position: relative;
  grid-column: full;
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
  border: var(--border-width-thin) solid var(--color-line-soft);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-cream) 80%, var(--color-cream-deep));
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.page-band__body--after-cards .card-row-quote::before {
  content: "“";
  display: block;
  height: 0.7em;
  margin-bottom: var(--space-s);
  color: var(--color-gold-soft);
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
}

.page-band__body--after-cards .card-row-quote p {
  max-width: 54rem;
  margin-inline: auto;
  font-size: var(--text-l);
}

.page-band__body--after-cards .card-row-quote cite {
  display: block;
  margin-top: var(--space-m);
  color: var(--color-gold-deep);
  font-family: var(--font-family-body);
  font-size: var(--text-meta);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-meta);
  text-transform: uppercase;
}

.page-band__body > *,
.page-band__form-intro > * { grid-column: content; }

.page-band .section-heading { margin-bottom: clamp(var(--space-l), 3.5vw, var(--space-xl)); }

/* Media ------------------------------------------------------------------ */

.page-intro-media {
  padding-block: clamp(var(--space-l), 3vw, var(--space-xl)) 0;
}

.page-intro-media__figure {
  width: min(100%, var(--content-width-l));
  aspect-ratio: 15 / 6;
  margin-inline: auto;
  overflow: hidden;
  border: 0.35rem solid var(--color-white);
  border-radius: var(--radius-l);
  background: var(--color-blush);
  box-shadow: var(--shadow-large);
}

.page-intro-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.page-band__lead-media {
  width: min(100%, 26rem);
  margin: 0 auto clamp(var(--space-xl), 4vw, var(--space-2xl));
  overflow: hidden;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

/* Images inside body copy stay in the reading column unless the migrated
   markup marks them as wide. Unclassed editor images keep the safe default. */
.page-band__body > figure {
  justify-self: center;
  width: min(100%, 26rem);
  margin-block: clamp(var(--space-xl), 4vw, var(--space-2xl));
  overflow: hidden;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

.page-band__body > figure:first-child { margin-block-start: 0; }
.page-band__body > figure:last-child { margin-block-end: 0; }
.page-band__body > figure:has(.canopy-image--wide) { grid-column: full; width: 100%; }

.canopy-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Split band: illustration beside the copy -------------------------------- */

.page-band--split .editorial-split__content h2 { margin-bottom: var(--space-m); }

#therapie-wieso .editorial-split__media .framed-media__image { aspect-ratio: 5 / 8; }

/* Full-bleed illustration ------------------------------------------------- */

.page-band--media {
  padding-inline: 0;
  padding-block: 0;
}

.page-band--media .page-band__figure { margin: 0; }

.page-band--media .page-band__image {
  max-height: min(70vh, 34rem);
  object-fit: cover;
}

/* Form band --------------------------------------------------------------- */

.page-band__form { width: min(100%, var(--content-width-l)); margin-inline: auto; }
.page-band__form-intro { margin-bottom: var(--space-l); text-align: center; }
.page-band__form-intro > * { justify-self: center; max-width: 46rem; }

/* In-page navigation ------------------------------------------------------ */

/*
 * The jump list lives inside the hero. As pills on the hero wash it reads as
 * part of the page opening rather than a second horizontal rule competing
 * with the header, the ornament, and the wave.
 */
.page-nav { margin-top: var(--space-l); }
.page-hero .page-nav { position: relative; z-index: 2; }

.page-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-hero--with-media .page-nav__list { justify-content: flex-start; }

.page-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-m);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  font-family: var(--font-family-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard);
}

.page-nav__list a:hover,
.page-nav__list a:focus-visible {
  border-color: var(--color-line-soft);
  background: color-mix(in srgb, var(--color-white) 70%, transparent);
  color: var(--color-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .page-nav__list a { transition: none; }
}

@media (max-width: 40rem) {
  .page-nav__list { gap: 0; }

  .page-nav__list a {
    min-height: 2rem;
    padding-inline: var(--space-xs);
  }
}