/* Haus Fünf: tokens and page markup. Engine selectors are never restyled. */

:root {
  --cw-canvas:      #0b100e;
  --cw-surface:     #141b17;
  --cw-ink:         #ece9e1;
  --cw-ink-soft:    #9aa39c;
  --cw-accent:      #d9a441;
  --cw-accent-ink:  #120e08;
  --cw-font-display: "Archivo", system-ui, sans-serif;
  --cw-font-text:    "Instrument Sans", system-ui, sans-serif;
  --cw-shadow-color: 160 30% 2%;
  --cw-r-sm: 2px; --cw-r-md: 2px; --cw-r-lg: 2px;

  --board-w: 7.5rem;
  --brass: var(--cw-accent);
}

/* ---- label schema: identical on every object -------------------------- */
.label__name {
  font-family: var(--cw-font-display);
  font-weight: 500;
  font-size: var(--cw-t-xl);
  line-height: var(--cw-leading-tight);
  letter-spacing: var(--cw-track-snug);
  margin: 0;
  text-wrap: balance;
}
.label__facts {
  margin: var(--cw-3) 0 0;
  color: var(--cw-ink-soft);
  max-width: 38ch;
  text-wrap: pretty;
}
.label__link {
  display: inline-block;
  margin-top: var(--cw-5);
  color: var(--cw-ink);
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--cw-d-fast) var(--cw-ease-out), color var(--cw-d-fast) var(--cw-ease-out);
}
.label__link:hover { color: var(--brass); }
.label__link:active { transform: translateY(1px); }

/* ---- the board --------------------------------------------------------- */
.board {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--board-w);
  z-index: var(--cw-z-chrome);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--cw-5) 0 var(--cw-5);
  background: color-mix(in oklab, var(--cw-surface) 92%, transparent);
  border-left: 1px solid var(--cw-hairline);
  box-shadow: var(--cw-edge);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.board__mark {
  font-family: var(--cw-font-display);
  font-weight: 500;
  font-size: var(--cw-t-sm);
  letter-spacing: var(--cw-track-normal);
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: var(--cw-2) 0;
}
.board__index {
  display: flex; flex-direction: column; align-items: center; gap: var(--cw-2);
  margin-top: var(--cw-6);
  font-family: var(--cw-font-mono);
  font-size: var(--cw-t-xs);
  letter-spacing: var(--cw-track-wide);
  text-transform: uppercase;
}
.board__index a { color: var(--cw-ink-soft); text-decoration: none; padding: var(--cw-1) var(--cw-2); }
.board__index a:hover, .board__index a[aria-current="true"] { color: var(--cw-ink); }

.board__hooks {
  list-style: none; margin: auto 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--cw-3);
}
.board__hooks li { position: relative; }
/* the hook: a short brass pin the key hangs from */
.board__hooks li::before {
  content: ""; position: absolute; left: 50%; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass); translate: -50% 0;
  box-shadow: 0 1px 2px hsl(var(--cw-shadow-color) / 0.5);
}
.key {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 3.2rem; padding: 2px 0 var(--cw-1);
  background: none; border: 0; cursor: pointer;
  color: var(--cw-ink-soft);
  transform-origin: 50% 9px;
  will-change: transform;
  transition: color var(--cw-d-base) var(--cw-ease-out), opacity var(--cw-d-slow) var(--cw-ease-out);
}
.key svg { width: 20px; height: 54px; overflow: visible; }
.key__bow, .key__blade { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.key__hole { fill: var(--cw-surface); }
.key__n { font-family: var(--cw-font-mono); font-size: var(--cw-t-xs); letter-spacing: var(--cw-track-wide); }
.key.is-near, .key:hover { color: var(--cw-ink); }
.key.is-visited { color: var(--brass); }
.key.is-taken { opacity: 0.18; }
.key.is-taken .key__n { visibility: hidden; }
.key:active { transform: translateY(1px); }

.board__cta {
  margin-top: var(--cw-5);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--cw-t-sm);
  color: var(--cw-ink);
  text-decoration-color: var(--brass);
  text-underline-offset: 0.28em;
  padding: var(--cw-2) 0;
}
.board__cta:hover { color: var(--brass); }

main { padding-right: var(--board-w); }

/* ---- 1 · house ---------------------------------------------------------- */
.house { background: var(--cw-canvas); }
.plane {
  position: absolute; left: 50%; top: 50%;
  width: 118%; height: 124%; max-width: none;
  object-fit: cover; object-position: 50% 60%;
  translate: -50% -50%;
}
/* wider than the frame on purpose: cover then scales the photo up and
   object-position pulls the lit façade into view instead of the black sky */
.plane--far  { z-index: 0; width: 118%; object-position: 50% 55%; }
/* a near plane of atmosphere: dark at the edges, open in the middle, moving
   faster than the photo so the frame reads as depth rather than a flat still */
.plane--haze {
  z-index: 1;
  background:
    radial-gradient(72% 62% at 50% 50%, transparent 42%, color-mix(in oklab, var(--cw-canvas) 45%, transparent) 80%, color-mix(in oklab, var(--cw-canvas) 82%, transparent) 100%);
}
.house__scrim { z-index: 2; }
/* a floor fade hides the clip line where planes travel past the section edge */
.house__floor {
  position: absolute; inset: auto 0 0 0; height: 28vh; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, var(--cw-canvas) 0%, color-mix(in oklab, var(--cw-canvas) 60%, transparent) 55%, transparent 100%);
}
.label--hero .label__name { font-size: var(--cw-t-3xl); }
.label--hero .label__facts { font-size: var(--cw-t-lg); line-height: 1.4; color: var(--cw-ink); max-width: 30ch; }
/* the hero copy sits in the dark foreground corner; a small scrim behind it only */
.label--hero::before {
  content: ""; position: absolute; inset: -2rem -3rem -2rem -2rem; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 70%, color-mix(in oklab, var(--cw-canvas) 88%, transparent), transparent 100%);
}

/* ---- 2 · rooms ---------------------------------------------------------- */
.rooms { background: var(--cw-canvas); display: flex; align-items: center; }
.rail {
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline: var(--cw-gutter) calc(var(--cw-gutter) + var(--board-w));
}
.rail__lead { flex: 0 0 auto; width: clamp(16rem, 24vw, 22rem); }
.rail__lead .label__name { font-size: var(--cw-t-2xl); }
.rail__note { flex: 0 0 auto; width: clamp(16rem, 22vw, 20rem); padding-right: var(--cw-gutter); }

.room {
  flex: 0 0 auto;
  width: clamp(18rem, 30vw, 29rem);
  will-change: transform, opacity;
}
.room__fig {
  margin: 0;
  box-shadow: var(--cw-e2), var(--cw-edge);
  background: var(--cw-surface);
}
.room__fig { aspect-ratio: 4 / 3; overflow: hidden; }
.room__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.room .label { margin-top: var(--cw-4); }
.room .label__name { font-size: var(--cw-t-lg); }
.room__take {
  margin-top: var(--cw-4);
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cw-ink-soft);
  font-size: var(--cw-t-sm);
  text-decoration: underline; text-decoration-color: var(--cw-hairline-strong);
  text-underline-offset: 0.28em;
  transition: color var(--cw-d-fast) var(--cw-ease-out);
}
.room__take:hover { color: var(--cw-ink); text-decoration-color: var(--brass); }
.room__take:active { transform: translateY(1px); }
.room.is-chosen .room__take { color: var(--brass); text-decoration-color: var(--brass); }
.room.is-chosen .room__take span { display: none; }
.room.is-chosen .room__take::before { content: "Ihr Schlüssel. Hängt am Ende der Seite bereit."; }

/* staggered settle: items after the first arrive as the rail is pulled */
@media (prefers-reduced-motion: no-preference) {
  .room { opacity: calc(0.55 + 0.45 * var(--settle, 1)); transform: translate3d(0, calc((1 - var(--settle, 1)) * 18px), 0); }
}

/* ---- 3 · kitchen ------------------------------------------------------- */
.kitchen { background: var(--cw-surface); }
.kitchen__ground {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to top, transparent 0, transparent 42%, var(--cw-hairline) 42%, var(--cw-hairline) calc(42% + 1px), transparent calc(42% + 1px)),
    var(--cw-surface);
}
.kitchen__fig { position: absolute; inset: 0; margin: 0; z-index: 0; }
.kitchen__fig img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 4 · location ------------------------------------------------------ */
.lage { padding-block: var(--cw-9) var(--cw-10); }
.lage__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: clamp(2rem, 6vw, 7rem); row-gap: var(--cw-6);
  align-items: start;
}
.lage__grid > h2 { grid-column: 1 / -1; }
.lage__address {
  font-style: normal;
  font-family: var(--cw-font-display);
  font-size: var(--cw-t-lg);
  line-height: 1.35;
  color: var(--cw-ink);
}
.lage__text { grid-column: 2; margin: 0; max-width: 46ch; }
.lage__facts { grid-column: 1 / -1; margin: var(--cw-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cw-6); }
.lage__facts > div { border-top: 1px solid var(--cw-hairline); padding-top: var(--cw-4); }
.lage__facts dt { font-family: var(--cw-font-mono); font-size: var(--cw-t-xs); letter-spacing: var(--cw-track-wide); text-transform: uppercase; color: var(--cw-ink-soft); }
.lage__facts dd { margin: var(--cw-2) 0 0; color: var(--cw-ink); text-wrap: pretty; }

/* ---- 5 · close --------------------------------------------------------- */
.close {
  background: var(--cw-canvas);
  display: grid; grid-template-rows: 1fr auto;
}
.close__plate {
  align-self: center; justify-self: center;
  width: min(34rem, calc(100% - 2 * var(--cw-gutter)));
  padding: var(--cw-7) var(--cw-7) var(--cw-7) calc(var(--cw-7) + 4.5rem);
  position: relative;
  background: var(--cw-surface);
  border: 1px solid var(--cw-hairline);
  box-shadow: var(--cw-e3), var(--cw-edge);
}
.close__key {
  position: absolute; left: var(--cw-6); top: var(--cw-7);
  width: 2.6rem; height: auto; color: var(--brass);
}
.ck__bow, .ck__blade {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260;
  /* the key draws itself from the close act's progress */
  stroke-dashoffset: calc(260 * (1 - min(1, var(--cw-p, 0) * 1.6)));
}
.ck__hole { fill: var(--cw-surface); opacity: calc(min(1, var(--cw-p, 0) * 1.6)); }
.close__room { color: var(--cw-ink); }
.foot {
  padding: var(--cw-5) var(--cw-gutter);
  display: flex; justify-content: space-between; gap: var(--cw-4); flex-wrap: wrap;
  font-size: var(--cw-t-sm); color: var(--cw-ink-soft);
  border-top: 1px solid var(--cw-hairline);
}
.foot p { margin: 0; }

/* ---- reduced motion: the key is drawn, nothing swings ------------------ */
@media (prefers-reduced-motion: reduce) {
  .ck__bow, .ck__blade { stroke-dashoffset: 0; }
  .ck__hole { opacity: 1; }
  .key { transform: none !important; }
  .plane { translate: -50% -50%; }
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --board-w: 0px; }
  main { padding-right: 0; padding-bottom: 5.4rem; }
  .board {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 5.4rem;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 var(--cw-4);
    border-left: 0; border-top: 1px solid var(--cw-hairline);
  }
  .board__mark { writing-mode: horizontal-tb; transform: none; padding: 0; }
  .board__index { display: none; }
  .board__hooks { flex-direction: row; gap: var(--cw-2); margin: 0; }
  .board__hooks li::before { top: 2px; }
  .key { width: 2.2rem; padding-top: 0; }
  .key svg { width: 14px; height: 38px; }
  .key__n { display: none; }
  .board__cta { writing-mode: horizontal-tb; transform: none; margin: 0; padding: 0; font-size: var(--cw-t-xs); }

  .label--hero .label__name { font-size: var(--cw-t-2xl); }
  .label--hero .label__facts { font-size: var(--cw-t-base); }
  .plane { width: 130%; height: 124%; }
  .plane--far { width: 130%; object-position: 55% 55%; }
  .house .cw-copy--lead { bottom: clamp(5rem, 14vh, 8rem); }

  .rail { gap: var(--cw-5); }
  .rail__lead, .rail__note { width: 72vw; }
  .room { width: 76vw; }

  .lage__grid { grid-template-columns: 1fr; }
  .lage__text { grid-column: 1; }
  .lage__facts { grid-template-columns: 1fr; gap: var(--cw-4); }

  .close { grid-template-rows: 1fr auto; }
  .close__plate { padding: var(--cw-6) var(--cw-5) var(--cw-6) calc(var(--cw-5) + 3.4rem); }
  .close__key { left: var(--cw-4); top: var(--cw-6); width: 2rem; }
  .foot { padding-bottom: calc(var(--cw-5)); }
}
@media (max-width: 420px) {
  .board__mark { display: none; }
  .board__cta { white-space: nowrap; }
  .key { width: 1.8rem; }
  .board__hooks { gap: var(--cw-1); }
}