/* =====================================================================
   HD homepage proposals — shared base
   ---------------------------------------------------------------------
   Load order:
     assets/typography.css → assets/site.css → shared/hd-base.css → <direction>/theme.css

   - Typography comes only from assets/typography.css (no font rules here).
   - Everything is scoped (.hd / .hd-…). The live site and the locked second
     section (.overview · .carousel · .teaser from site.css) are untouched.
   - Spacing follows PM-International proportions, measured at 1440px:
       feature sections 120 · tinted bands 96 · text↔media gap 112
       card gaps 16–24 · full-bleed image bands ≈ 2.33 : 1 · 50/50 splits
   ===================================================================== */

.hd {
  /* Spacing system */
  --hd-space-l: clamp(72px, 8.4vw, 120px);   /* feature section padding */
  --hd-space-s: clamp(56px, 6.7vw, 96px);    /* tinted band padding     */
  --hd-gap-xl: clamp(40px, 7.8vw, 112px);    /* text ↔ media            */
  --hd-gap-m: clamp(16px, 1.7vw, 24px);      /* cards / tiles           */
  --hd-radius: 4px;

  /* Theme tokens — every direction overrides these */
  --hd-bg: #fbf8f2;
  --hd-bg-alt: #f2ece1;
  --hd-panel: #e1e9e5;
  --hd-deep: #2f4b41;
  --hd-deep-2: #243b33;
  --hd-on-deep: #f4efe6;
  --hd-accent: #a88c62;
  --hd-accent-soft: #dcc9a6;

  /* Pebble palette (sand · sage · blush) */
  --hd-pebble-1: #eadcbc;
  --hd-pebble-2: #d7e3d0;
  --hd-pebble-3: #f2ded1;
}

/* ---------- Section rhythm ---------- */
.hd-section   { padding-block: var(--hd-space-l); }
.hd-section--s { padding-block: var(--hd-space-s); }
.hd-bg     { background: var(--hd-bg); }
.hd-bg-alt { background: var(--hd-bg-alt); }
.hd-panel  { background: var(--hd-panel); }
.hd-deep   { background: var(--hd-deep); color: var(--hd-on-deep); }
.hd-deep h2, .hd-deep h3 { color: var(--hd-on-deep); }
.hd-deep .section-label, .hd-deep .eyebrow { color: var(--hd-accent-soft); }
.hd-deep .eyebrow::before { background: var(--hd-accent-soft); }

/* Light button variant for dark surfaces */
.hd-button--light { border-color: var(--hd-accent-soft); color: var(--hd-on-deep); }
.hd-button--light:hover { background: var(--hd-on-deep); border-color: var(--hd-on-deep); color: var(--hd-deep); }
.hd-button--solid { background: var(--hd-accent); border-color: var(--hd-accent); color: #fff; }
.hd-button--solid:hover { background: var(--hd-deep); border-color: var(--hd-deep); color: var(--hd-on-deep); }

/* Actions — convention: a button and/or text link closes a content block,
   right-aligned on the content edge (button first, link second).
   From 640 px down the group starts on the left, where the text starts. */
.hd-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 32px; margin-top: 32px; }
@media (max-width: 640px) { .hd-actions { justify-content: flex-start; } }

/* =====================================================================
   Hero — the existing homepage hero, enlarged to fill the viewport
   (markup and design language unchanged: image, overlay, eyebrow,
   serif h1, meta row with person + "Entdecken")
   ===================================================================== */
.hd-hero .hero__inner { min-height: 100svh; padding-bottom: clamp(40px, 6vw, 80px); }
.hd-hero .hero__media img { object-position: var(--hd-hero-pos, 50% 50%); }
.hd-hero .hero__media::after {
  background: linear-gradient(180deg, rgba(28, 25, 20, .46) 0%, rgba(28, 25, 20, .06) 36%, rgba(28, 25, 20, .12) 58%, rgba(28, 25, 20, .66) 100%);
}
.hd-hero .hero__meta { max-width: 100%; }

/* Fade variant: several images stacked, one visible at a time (data-hero-fade, shared/hd.js) */
.hd-hero__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hd-hero__img.is-active { opacity: 1; }

/* =====================================================================
   Split — 50/50 edge-to-edge (image | text panel)
   ===================================================================== */
.hd-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--hd-split-bg, var(--hd-panel)); }
.hd-split__media { position: relative; margin: 0; min-height: clamp(420px, 50vw, 720px); overflow: hidden; }
.hd-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hd-split-pos, 50% 50%); }
.hd-split__body { display: flex; align-items: center; padding: var(--hd-space-l) clamp(24px, 7.8vw, 112px); }
.hd-split__inner { max-width: 520px; }
.hd-split__inner > h2 { margin-bottom: 24px; }
.hd-split--reverse .hd-split__media { order: 2; }
@media (max-width: 860px) {
  .hd-split { grid-template-columns: 1fr; }
  .hd-split__media { min-height: 0; aspect-ratio: 4 / 3; }
  .hd-split--reverse .hd-split__media { order: 0; }
  .hd-split__body { padding: var(--hd-space-s) var(--gutter); }
}

/* =====================================================================
   Steps — organic image mask + numbered pebbles on a dotted path
   ===================================================================== */
.hd-steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hd-gap-xl); align-items: center; }
.hd-steps__media { position: relative; margin: 0; isolation: isolate; }
.hd-steps__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: 47% 53% 44% 56% / 55% 43% 57% 45%; }
.hd-steps__media::after {
  content: ""; position: absolute; right: -4%; bottom: 6%; z-index: -1; width: 22%; aspect-ratio: 1.2;
  border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; background: var(--hd-pebble-2);
}
.hd-steps__body h2 { margin-bottom: 32px; }
.hd-steps__list { margin: 0; padding: 0; list-style: none; }
.hd-step { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; padding-bottom: 32px; }
.hd-step:not(:last-child)::before { content: ""; position: absolute; left: 43px; top: 84px; bottom: 6px; border-left: 2px dotted var(--hd-accent); }
.hd-step__num {
  display: grid; place-items: center; width: 88px; height: 80px; color: var(--hd-deep);
  border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%; background: var(--hd-pebble-1);
}
.hd-step:nth-child(3n+2) .hd-step__num { background: var(--hd-pebble-2); border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%; }
.hd-step:nth-child(3n) .hd-step__num { background: var(--hd-pebble-3); border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%; }
.hd-step h3 { margin: 8px 0 4px; }
.hd-step p { margin: 0; }
.hd-steps__body .hd-actions { margin-top: 8px; }
@media (max-width: 860px) {
  .hd-steps { grid-template-columns: 1fr; }
  .hd-steps__media { width: min(420px, 88%); }
}
@media (max-width: 480px) {
  .hd-step { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .hd-step__num { width: 64px; height: 58px; }
  .hd-step:not(:last-child)::before { left: 31px; top: 62px; }
}

/* =====================================================================
   Band — full-bleed image with content on top
   ===================================================================== */
.hd-band { position: relative; display: flex; align-items: var(--hd-band-align, center); min-height: var(--hd-band-min, clamp(420px, 43vw, 640px)); overflow: hidden; isolation: isolate; }
.hd-band__media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hd-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hd-band-pos, 50% 50%); }
.hd-band__content { position: relative; width: 100%; padding-block: var(--hd-space-l); }

/* =====================================================================
   Peek gallery — centred slide with the neighbours peeking in
   (pattern from the PM-International reference, "add this.png")
   ===================================================================== */
.hd-peek { --hd-peek-w: min(58vw, 836px); --hd-peek-gap: clamp(16px, 5.5vw, 80px); overflow: hidden; }
.hd-peek__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.hd-peek__head .section-label { position: static; margin: 0 0 12px; }
.hd-peek__nav { display: flex; gap: 8px; flex: none; }
.hd-peek__track {
  display: flex; align-items: center; gap: var(--hd-peek-gap); margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.hd-peek__track::-webkit-scrollbar { display: none; }
.hd-peek__track::before, .hd-peek__track::after { content: ""; flex: 0 0 max(0px, calc((100% - var(--hd-peek-w)) / 2 - var(--hd-peek-gap))); }
.hd-peek__slide { flex: 0 0 var(--hd-peek-w); scroll-snap-align: center; transform: scale(.84); opacity: .72; transition: transform .7s var(--ease), opacity .7s ease; cursor: pointer; }
.hd-peek__slide.is-active { transform: none; opacity: 1; cursor: default; }
.hd-peek__slide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--hd-radius); }
.hd-peek__foot { margin-top: clamp(28px, 3vw, 44px); text-align: center; }
@media (max-width: 760px) {
  .hd-peek { --hd-peek-w: 82vw; --hd-peek-gap: 12px; }
  .hd-peek__head { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Footer — V2 contact block + KNY-style information columns + legal row
   ===================================================================== */
.hd-footer { background: var(--hd-bg-alt); }
.hd-footer__cta { padding-block: var(--hd-space-l) calc(var(--hd-space-l) + clamp(24px, 4vw, 56px)); }
.hd-footer__cta h2 { max-width: 22ch; }
/* Contact row as in index_HD – V1 (.copy-grid): phone + email | address paragraph.
   The address column drops below when the row gets too narrow. */
.hd-contact {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-strong);
}
.hd-contact__direct { flex: 0 0 auto; max-width: 100%; }
.hd-contact > p { flex: 1 1 240px; margin: 0; padding-top: 6px; }
/* phone + email: heading size, gold */
.hd-contact__direct a {
  display: block; width: fit-content; padding: 2px 0; color: var(--gold-dark);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease);
}
.hd-contact__direct a:hover { background-size: 100% 2px; }

/* KNY "slope" — the information area starts with a gentle diagonal */
.hd-footer__main {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding-block: calc(var(--hd-space-s) + clamp(24px, 4vw, 56px)) var(--hd-space-s);
  background: var(--hd-deep); color: var(--hd-on-deep);
  clip-path: polygon(0 clamp(24px, 4vw, 56px), 100% 0, 100% 100%, 0 100%);
}
/* raked-sand ripples (karesansui) — CSS only */
.hd-footer__main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 86% 118%, transparent 0 28px, rgba(255, 255, 255, .055) 28px 29px);
}
.hd-footer__kanji { position: absolute; right: var(--gutter); bottom: -.12em; z-index: -1; color: rgba(255, 255, 255, .07); pointer-events: none; }
.hd-footer__grid { display: grid; grid-template-columns: 1fr 1.25fr 1.35fr .7fr; gap: 40px; }
.hd-footer__brand img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.hd-footer__brand p { margin: 20px 0 0; }
.hd-footer__claim { color: var(--hd-accent-soft); }
.hd-footer__title { margin: 0 0 16px; color: var(--hd-accent-soft); }
.hd-footer__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hd-footer__list a { color: inherit; opacity: .88; transition: opacity .3s ease, color .3s ease; }
.hd-footer__list a:hover { opacity: 1; color: var(--hd-accent-soft); }
.hd-iconline { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.hd-iconline svg { width: 20px; height: 20px; margin-top: 2px; color: var(--hd-accent-soft); }
.hd-hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.hd-hours dd { margin: 0; }
.hd-footer__note { margin: 16px 0 0; opacity: .8; }
.hd-footer__legal { background: var(--hd-deep-2); color: var(--hd-on-deep); padding-block: 20px; }
.hd-footer__legal .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.hd-footer__legal p { margin: 0; opacity: .8; }
.hd-footer__legal nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hd-footer__legal a { color: inherit; opacity: .85; }
.hd-footer__legal a:hover { opacity: 1; color: var(--hd-accent-soft); }
@media (max-width: 1024px) { .hd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hd-footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* Review switcher (not part of the design — only for comparing proposals) */
.hd-review {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(31, 30, 27, .78); backdrop-filter: blur(6px);
}
.hd-review a { padding: 6px 12px; border-radius: 999px; color: #fff; }
.hd-review a:hover, .hd-review a[aria-current="page"] { background: rgba(255, 255, 255, .18); }
@media (max-width: 640px) { .hd-review { right: 8px; bottom: 8px; } .hd-review a { padding: 4px 9px; } }

/* =====================================================================
   Style guide page chrome (only used by style-guide.html)
   ===================================================================== */
.hd-sg-top { background: var(--hd-deep); color: var(--hd-on-deep); padding-block: 40px; }
.hd-sg-top a { color: var(--hd-accent-soft); }
.hd-sg-top h1 { color: var(--hd-on-deep); }
.hd-sg-nav { position: sticky; top: 0; z-index: 20; background: var(--hd-bg); border-bottom: 1px solid var(--line); }
.hd-sg-nav ul { display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 0; padding: 16px 0; list-style: none; }
.hd-sg-nav a { color: var(--ink); }
.hd-sg-section { padding-block: var(--hd-space-s); border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.hd-sg-section > .wrap > h2 { margin-bottom: 8px; }
.hd-sg-lead { max-width: 60ch; margin-bottom: 32px; }
.hd-sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hd-sg-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--hd-radius); }
.hd-sg-swatch { height: 96px; margin: -20px -20px 16px; border-radius: var(--hd-radius) var(--hd-radius) 0 0; border-bottom: 1px solid var(--line); }
.hd-sg-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line); }
.hd-sg-demo { padding: 32px; border: 1px dashed var(--line-strong); border-radius: var(--hd-radius); background: #fff; overflow: hidden; }
.hd-sg-demo--flush { padding: 0; }
.hd-sg-demo--deep { background: var(--hd-deep); }
.hd-sg-spec { margin-top: 12px; color: var(--muted); }
.hd-sg-demo .hd-split__media { min-height: 320px; }
@media (max-width: 860px) { .hd-sg-demo .hd-split__media { min-height: 0; } }
.hd-sg-scroll { overflow-x: auto; }
.hd-sg-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.hd-sg-table th, .hd-sg-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
@media (max-width: 760px) { .hd-sg-row { grid-template-columns: 1fr; gap: 8px; } }