/* ============================================
   H&O Living — Homepage specific
   ============================================ */

/* ── Hero ────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 100vh;
  position: relative;
}
.hero__type {
  padding: 10rem 4rem 4rem;
  position: relative;
  border-right: 1px solid var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.hero__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.hero__headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-top: 3rem;
}
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hero__headline .word-inner {
  display: inline-block;
  transform: translateY(110%);
}
.hero.is-loaded .hero__headline .word-inner {
  animation: word-rise 0.9s var(--ease-out) forwards;
}
.hero.is-loaded .hero__headline .word:nth-child(1) .word-inner { animation-delay: 0.05s; }
.hero.is-loaded .hero__headline .word:nth-child(2) .word-inner { animation-delay: 0.12s; }
.hero.is-loaded .hero__headline .word:nth-child(3) .word-inner { animation-delay: 0.19s; }
.hero.is-loaded .hero__headline .word:nth-child(4) .word-inner { animation-delay: 0.26s; }
.hero.is-loaded .hero__headline .word:nth-child(5) .word-inner { animation-delay: 0.33s; }
.hero.is-loaded .hero__headline .word:nth-child(6) .word-inner { animation-delay: 0.4s; }
.hero.is-loaded .hero__headline .word:nth-child(7) .word-inner { animation-delay: 0.47s; }
@keyframes word-rise {
  to { transform: translateY(0); }
}

.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out) 0.7s, transform 0.8s var(--ease-out) 0.7s;
}
.hero.is-loaded .hero__bottom { opacity: 1; transform: translateY(0); }

.hero__lead {
  max-width: 20rem;
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: 1.55;
}
.hero__cta {
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero__cta:hover { background: var(--accent-hover); }
.hero__cta .arrow { transition: transform 0.3s var(--ease-out); }
.hero__cta:hover .arrow { transform: translateX(4px); }

.hero__photo {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  /* parallax offset updated by JS */
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.05);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.2s;
}
.hero.is-loaded .hero__photo img { opacity: 1; }
.hero__photo-meta {
  position: absolute;
  inset: auto 2.5rem 2rem;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.03em;
}

/* ── Section rail (01/02/03/…) ───────────── */
.rail {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: end;
  gap: 2rem;
  padding: 4rem var(--pad-x) 1.5rem;
  border-top: 1px solid var(--ink);
}
.rail--dark {
  background: var(--ink);
  color: var(--white);
  border-top: none;
}
.rail__num {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.rail__title {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.rail--dark .rail__title { color: rgba(255, 255, 255, 0.7); }

/* ── Properties ─────────────────────────── */
.props-section {
  padding: 3rem var(--pad-x) var(--section-pad);
}
.props-head {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 4rem;
}
.props-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.props-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.props-filters button {
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.props-filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.props-row--featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.props-row--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.prop {
  display: block;
  cursor: pointer;
}
.prop__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  background: var(--surface-2);
}
.prop--featured .prop__media { aspect-ratio: 16/9; }
.prop--tall .prop__media { aspect-ratio: 4/5; }
.prop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.prop:hover .prop__media img { transform: scale(1.06); }
.prop__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,23,20,0.15), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.prop:hover .prop__media::after { opacity: 1; }
.prop__arrow {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
}
.prop:hover .prop__arrow {
  transform: scale(1);
  opacity: 1;
}
.prop__meta {
  margin-top: 1.25rem;
}
.prop__loc {
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-bottom: 0.5rem;
}
.prop__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.prop__title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.25s ease;
}
.prop--featured .prop__title { font-size: 1.5rem; letter-spacing: -0.02em; }
.prop:hover .prop__title { color: var(--accent-hover); }
.prop__price {
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
}
.prop--featured .prop__price { font-size: 1.125rem; }
.prop__specs {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: 0.4rem;
}

.props-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.props-foot__count { font-size: var(--fs-sm); color: var(--mute); }
.props-foot__link {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s var(--ease-out);
}
.props-foot__link:hover { gap: 0.85rem; }

/* ── Story ──────────────────────────────── */
.story {
  background: var(--ink);
  color: var(--white);
  padding: 3rem var(--pad-x) var(--section-pad);
  display: grid;
  grid-template-columns: 5rem 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.story__spacer { grid-column: 1; }
.story__media {
  padding-right: 3rem;
}
.story__media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
}
.story__caption {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
}

.story__body { padding-top: 4rem; }
.story__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-weight: 500;
}
.story__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2.5rem;
  max-width: 28rem;
}
.story__stats {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.story__stat label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 0.5rem;
}
.story__stat .value {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: block;
}
.story__stat .value::after {
  content: attr(data-suffix);
  color: var(--accent);
}

.story__link {
  display: inline-flex;
  margin-top: 3.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  gap: 0.5rem;
  align-items: center;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.story__link:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

/* ── Valuation ──────────────────────────── */
.valuation {
  padding: 3rem var(--pad-x) var(--section-pad);
  display: grid;
  grid-template-columns: 5rem 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.valuation__copy { padding-top: 1.5rem; }
.valuation__copy h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.valuation__copy p {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-top: 2rem;
  max-width: 26rem;
}
.steps {
  margin-top: 3.5rem;
}
.steps__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.steps__row:first-child { border-top: 1px solid var(--line); }
.steps__n { font-size: var(--fs-sm); color: var(--accent); font-weight: 500; }
.steps__text {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.steps__text strong { font-weight: 500; font-size: 1.0625rem; }
.steps__text span { font-size: var(--fs-sm); color: var(--mute); }

.form-card {
  background: var(--surface);
  padding: 2.25rem;
  border-radius: var(--radius);
}
.form-card__step { font-size: var(--fs-xs); color: var(--mute); margin-bottom: 1rem; }
.form-card h3 {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-chip {
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-align: left;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.form-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  font-weight: 500;
}
.form-fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.form-field {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  transition: border-color 0.2s ease;
}
.form-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-bottom: 0.25rem;
}
.form-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
}

/* Icon-Variante: SVG links, Label + Input rechts. HTML:
   <label class="form-field has-icon">
     <svg class="form-field__icon">…</svg>
     <span>Label</span>
     <input … />
   </label>                                                          */
.form-field.has-icon {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.7rem 1rem 0.75rem 0.95rem;
}
.form-field__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 1.15rem;
  height: 1.15rem;
  align-self: center;
  color: var(--accent);
  pointer-events: none;
}
.form-field.has-icon > span {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--mute);
  text-transform: uppercase;
  margin: 0;
}
.form-field.has-icon > input,
.form-field.has-icon > select {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}
.form-submit {
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.25s ease;
}
.form-submit:hover { background: var(--accent-hover); }

/* ── Regions ────────────────────────────── */
.regions {
  padding: 3rem 0 var(--section-pad);
  background: var(--surface);
}
.regions__head {
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
}
.regions__head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.regions__nav {
  display: flex;
  gap: 0.5rem;
}
.regions__nav button {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  border: 1px solid var(--line-strong);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.regions__nav button.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.regions__track {
  display: flex;
  gap: 1rem;
  padding-inline: var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.regions__track::-webkit-scrollbar { display: none; }
.region-card {
  flex: 0 0 clamp(240px, 25vw, 300px);
  scroll-snap-align: start;
}
.region-card__media {
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.region-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.region-card:hover .region-card__media img { transform: scale(1.05); }
.region-card__meta {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.region-card__name { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; }
.region-card__kreis { font-size: var(--fs-sm); color: var(--mute); margin-top: 0.25rem; }
.region-card__count { font-size: var(--fs-sm); color: var(--ink); }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero__type { border-right: none; border-bottom: 1px solid var(--ink); padding: 8rem 2rem 3rem; min-height: 70vh; }
  .hero__photo { min-height: 60vh; position: relative; }
  .story { grid-template-columns: 1fr; padding: 3rem 2rem var(--section-pad); }
  .story__media { padding-right: 0; }
  .story__body { padding-top: 2rem; }
  .valuation { grid-template-columns: 1fr; }
  .rail, .props-head, .regions__head { grid-template-columns: auto 1fr; }
  .rail__num, .rail__title { grid-column: auto; }
  .props-row--featured { grid-template-columns: 1fr; }
  .props-row--grid { grid-template-columns: 1fr 1fr; }
  .valuation__copy h2, .regions__head h2 { font-size: clamp(2rem, 7vw, 3rem); }
}
@media (max-width: 640px) {
  .hero__headline { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .props-head { grid-template-columns: 1fr; align-items: start; }
  .props-row--grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .story__stats { grid-template-columns: 1fr 1fr; }
  .regions__head { grid-template-columns: 1fr; align-items: start; }
}