/* =====================================================================
   HD · A FINAL — finalisation of direction A (Washi)
   ---------------------------------------------------------------------
   Changes against A:
   - Hero cross-fades through 4 images, title in the XL exception size
   - Übersicht: 2 cards per view, contained in the grid
   - 01 / Shiatsu uses the shared pebble steps (.hd-steps)
   - Karola quote is a compact banner (site.css .banner)
   - Colours only from the pebble palette (sand · sage · blush) on cream,
     paper for Behandlung, white for Kontakt; dark green is reserved for
     the footer and the Kontakt text above it (as in index_HD – V1)
   - Actions (.hd-actions) sit right-aligned at the end of every block
   - Content width 1200 px (PM-International proportion)
   Typography: assets/typography.css only. Shared parts: shared/hd-base.css.
   ===================================================================== */

.hd--final {
  --wrap: 1312px;              /* 1200 px content + gutters */
  --hd-bg: #fbf7ef;            /* cream ground              */
  --hd-bg-alt: #ffffff;        /* white · contact block     */
  --hd-paper: #faf9f5;         /* paper · Behandlung        */
  --hd-panel: #d7e3d0;         /* sage · split panel        */
  --hd-deep: #2f4b41;          /* footer + Kontakt text     */
  --hd-deep-2: #243b33;
  --hd-on-deep: #f4efe6;
  --hd-accent: #a9864f;        /* gold · buttons, details   */
  --hd-accent-soft: #e5d0a1;
  background: var(--hd-bg);
}

/* ---------- Übersicht: white-translucent band, 2 cards per view, aligned to the grid ---------- */
.overview--grid { background: rgba(255, 255, 255, .72); padding-bottom: var(--hd-space-s); }
.overview--grid + .hd-section { padding-top: var(--hd-space-s); }   /* tighter hand-over to 01 · Shiatsu */
.overview--grid .overview__row { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.overview--grid .carousel__track { padding-right: 0; }
.overview--grid .carousel__slide { flex-basis: calc((100% - 20px) / 2); }
@media (max-width: 860px) {
  .overview--grid .overview__aside { padding-right: 0; }
  .overview--grid .carousel__slide { flex-basis: 86%; }
}

/* ---------- Leitgedanke: compact banner ---------- */
.hd--final .banner { background: var(--hd-pebble-3); border-color: transparent; }
.hd--final .banner__media { position: relative; min-height: 260px; }   /* portrait image must not set the height */
.hd--final .banner__media img { position: absolute; inset: 0; }
.hd--final .banner .quote { margin: 0; }

/* ---------- 02 · Persönlich: split photo | sage panel ---------- */
.a-person { --hd-split-pos: 38% 50%; }
.a-person .section-label { position: static; }
.a-creds { margin: 24px 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.a-creds li { padding: 12px 0; border-bottom: 1px solid var(--line-strong); }

/* ---------- 03 · Behandlung: facts on paper ---------- */
.a-facts { background: var(--hd-paper); }
.a-facts__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 40px 0 0; }
.a-fact { padding: 24px 0; border-top: 1px solid var(--line-strong); }
.a-fact dt { color: var(--ink); }
.a-fact dd { margin: 8px 0 0; }
@media (max-width: 560px) { .a-facts__row { grid-template-columns: 1fr; } }   /* "Zusatz-versicherung" breaks at its hyphen */

/* ---------- 04 · Praxis: full-bleed photo section ---------- */
.a-place { --hd-band-min: clamp(520px, 56vw, 780px); --hd-band-align: flex-end; --hd-band-pos: 50% 55%; color: #fff; }
.a-place::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 30, 24, .12) 0%, rgba(20, 30, 24, .38) 40%, rgba(20, 30, 24, .78) 100%);
}
.a-place h2 { color: #fff; }
.a-place .section-label { color: #fff; position: static; }
.a-place p { max-width: 46ch; margin-top: 16px; }

/* ---------- 06 · Kontakt: layout, spacing and type exactly as index_HD – V1 (#kontakt);
   white ground, text in the green of the button hover. Font sizes: assets/typography.css ---------- */
.hd--final .hd-footer__cta,
.hd--final .hd-footer__cta h2,
.hd--final .hd-contact__direct a { color: var(--hd-deep); }
.hd--final .hd-footer__cta h2 { max-width: none; }
.hd--final .hd-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.hd--final .hd-contact__direct a { padding: 7px 0; }
.hd--final .hd-contact > p { padding-top: 0; }
@media (max-width: 800px) { .hd--final .hd-contact { grid-template-columns: 1fr; } }