/*
 * Styles for bj-immos.
 * Visual system follows DESIGN.md (WIRED editorial). Hand-rolled, no framework.
 * Self-hosted woff2 fonts live in /assets/fonts/ — see src/assets/fonts/README.md.
 */

/* ============================================================
 * Self-hosted fonts (latin subsets, fontsource sources)
 * ============================================================ */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-700.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lora-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
}

/* ============================================================
 * Base
 * ============================================================ */

html,
body {
  background: var(--color-paper);
  color: var(--color-page-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visible keyboard focus — DESIGN.md §4 explicitly notes WIRED's own focus is under-served. */
:focus-visible {
  outline: var(--border-hard) solid var(--color-ink-black);
  outline-offset: 2px;
}

a {
  color: var(--color-page-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-color);
}

a:hover,
a:focus-visible {
  color: var(--color-link-blue);
}

/* ============================================================
 * Typography helpers
 * ============================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-page-ink);
}

.ribbon {
  background: var(--color-ink-black);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-ribbon);
  line-height: 1;
  letter-spacing: var(--ls-ribbon);
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--space-3) var(--container-pad-mobile);
}

.headline-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-hero);
  line-height: var(--lh-display-hero);
  letter-spacing: var(--ls-display-hero);
  font-weight: 400;
  color: var(--color-page-ink);
}

.headline-mid {
  font-family: var(--font-display);
  font-size: var(--fs-display-mid);
  line-height: var(--lh-display-mid);
  font-weight: 400;
  color: var(--color-page-ink);
}

.deck {
  font-family: var(--font-body);
  font-size: var(--fs-deck);
  line-height: var(--lh-deck);
  color: var(--color-page-ink);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.33;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-caption-gray);
}

/* ============================================================
 * Layout containers
 * ============================================================ */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

.section {
  padding-block: var(--space-6);
}

.hairline {
  height: 0;
  border: 0;
  border-top: var(--border-hairline) solid var(--color-ink-black);
  margin-block: var(--space-5);
}

.hairline--quiet {
  border-top-color: var(--color-hairline-tint);
}

.hairline--strong {
  border-top-width: var(--border-hard);
}

/* ============================================================
 * Site header
 * ============================================================ */

.site-header {
  background: var(--color-paper);
  border-bottom: var(--border-hard) solid var(--color-ink-black);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--color-ink-black);
  text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--color-ink-black);
}

.site-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-button);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-page-ink);
}

.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: var(--border-hard);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-link-blue);
}

/* ---- Burger toggle (visible on mobile only) ---- */
.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--border-hard) solid var(--color-ink-black);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.site-nav__toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.site-nav__toggle__bars span {
  display: block;
  height: 2px;
  background: var(--color-ink-black);
}

.site-nav__close {
  display: none;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--border-hard) solid var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-ink-black);
}

.site-nav__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
}

@media (max-width: 767px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-6);
    background: var(--color-paper);
    border-left: var(--border-hard) solid var(--color-ink-black);
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    z-index: 100;
    overflow-y: auto;
  }

  .site-nav[data-open] {
    transform: translateX(0);
  }

  .site-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-3);
  }

  .site-nav__link {
    padding-block: var(--space-2);
    border-bottom: var(--border-hairline) solid var(--color-hairline-tint);
    font-size: 1.125rem;
  }

  .site-nav__backdrop[data-open] {
    display: block;
  }

  body.has-nav-open {
    overflow: hidden;
  }
}

/* ============================================================
 * Site footer (the only inverted region)
 * ============================================================ */

.site-footer {
  background: var(--color-footer-ink);
  color: var(--color-paper);
  padding-block: var(--space-7);
  margin-top: var(--space-9);
}

.site-footer a {
  color: var(--color-paper);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-link-blue);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--fs-tertiary);
}

.site-footer__legal {
  font-family: var(--font-ui);
  font-size: var(--fs-tertiary);
  color: var(--color-caption-gray);
}

/* ============================================================
 * Buttons
 * ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-button);
  font-weight: 700;
  text-transform: none;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  background: var(--color-paper);
  color: var(--color-ink-black);
  border: var(--border-hard) solid var(--color-ink-black);
  border-radius: 0;
  cursor: pointer;
  transition:
    background var(--transition-color),
    color var(--transition-color);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-ink-black);
  color: var(--color-paper);
}

.btn--inverse {
  background: var(--color-ink-black);
  color: var(--color-paper);
  border-color: var(--color-ink-black);
}

.btn--inverse:hover,
.btn--inverse:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink-black);
}

.btn--whatsapp {
  background: #25d366;
  color: #0b2e1c;
  border-color: #128c4a;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: #128c4a;
  color: #ffffff;
}

.btn--share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn__icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  flex-shrink: 0;
}

.flat-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Mobile portrait: two buttons per row, each filling 50% of the width.
 * Order in markup: Details ansehen, Als PDF, Per WhatsApp teilen, Teilen. */
@media (max-width: 600px) {
  .flat-card__actions > .btn {
    flex: 1 1 calc(50% - var(--space-3) / 2);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
 * Forms (DESIGN.md §4 inputs)
 * ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form__label {
  font-family: var(--font-ui);
  font-size: var(--fs-link);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  color: var(--color-page-ink);
}

.form__required {
  color: var(--color-error-red);
  margin-left: 2px;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  line-height: var(--lh-ui);
  padding: var(--space-3);
  background: var(--color-paper);
  color: var(--color-page-ink);
  border: var(--border-hard) solid var(--color-ink-black);
  border-radius: 0;
}

.form__textarea {
  min-height: 12em;
  resize: vertical;
  font-family: var(--font-body);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-caption-gray);
}

/* Honeypot — hidden visually, present in DOM, focusable nowhere useful */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__error {
  font-family: var(--font-ui);
  font-size: var(--fs-link);
  color: var(--color-error-red);
  border-left: var(--border-hard) solid var(--color-error-red);
  padding-left: var(--space-3);
}

/* ============================================================
 * Flat overview (index)
 * ============================================================ */

.search {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.search__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-page-ink);
  margin-bottom: var(--space-1);
}

.search__field input,
.search__field select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hard) solid var(--color-ink-black);
  border-radius: 0;
  background: var(--color-paper);
}

.flat-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.flat-list__empty {
  font-family: var(--font-ui);
  color: var(--color-caption-gray);
  padding: var(--space-6) 0;
}

.flat-card {
  display: grid;
  gap: var(--space-3);
  grid-template-areas:
    "header"
    "summary"
    "hero"
    "body";
}

.flat-card > * {
  /* Grid items default to min-width: auto, which lets long German compound
     words push a column wider than its allocation and overflow the gap. */
  min-width: 0;
}

.flat-card__header  { grid-area: header; }
.flat-card__summary { grid-area: summary; }
.flat-card__hero    { grid-area: hero; }
.flat-card__body    { grid-area: body; }

.flat-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--color-hairline-tint);
  overflow: hidden;
  line-height: 0;
}

.flat-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flat-card__media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.flat-card__media[data-video-active] .flat-card__media__video {
  opacity: 1;
}

.flat-card__hero {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flat-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-mid);
  line-height: var(--lh-display-mid);
  /* German compound words (e.g. "2-Zimmer-Altbauwohnung") must wrap */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.flat-card__title a {
  text-decoration: none;
  color: var(--color-page-ink);
}

.flat-card__deck {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-page-ink);
}

.flat-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-link);
  color: var(--color-caption-gray);
}

.flat-card__facts strong {
  color: var(--color-page-ink);
  font-weight: 700;
}

.flat-card__facts--key {
  display: flex;
  width: 100%;
  gap: var(--space-4);
  padding: 4px var(--space-3);
  margin-block: var(--space-3);
  border: var(--border-hard) solid var(--status-border, #1f7a3a);
  background: var(--status-bg, #eaf6ee);
  color: var(--status-fg, #1f7a3a);
}

.flat-card__facts--key strong {
  color: var(--status-strong, #14532d);
}

.flat-card__facts__avail {
  margin-left: auto;
}

.flat-card__gallery {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.flat-card__gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--color-paper);
  border: var(--border-hairline) solid var(--color-hairline-tint);
  box-sizing: border-box;
  cursor: pointer;
  line-height: 0;
  transition: border-color 120ms ease;
  font: inherit;
  color: inherit;
}

.flat-card__gallery__btn:hover,
.flat-card__gallery__btn:focus-visible {
  border-color: var(--color-ink-black);
  outline: none;
}

.flat-card__gallery__btn[aria-current="true"] {
  border: var(--border-hard) solid var(--color-ink-black);
}

.flat-card__gallery__btn img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
}

/* Status colors bound to data-status on the article */
[data-flat][data-status="verfügbar"] {
  --status-border: #1f7a3a;
  --status-bg: #eaf6ee;
  --status-fg: #1f7a3a;
  --status-strong: #14532d;
}

[data-flat][data-status="reserviert"] {
  --status-border: #b45309;
  --status-bg: #fdf2dc;
  --status-fg: #92400e;
  --status-strong: #78350f;
}

[data-flat][data-status="vermietet"] {
  --status-border: #b91c1c;
  --status-bg: #fbe5e5;
  --status-fg: #991b1b;
  --status-strong: #7f1d1d;
}

/* ============================================================
 * Flat detail page
 * ============================================================ */

.flat-detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.flat-detail__facts {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  border-top: var(--border-hairline) solid var(--color-ink-black);
}

.flat-detail__facts tr {
  border-bottom: var(--border-hairline) solid var(--color-hairline-tint);
}

.flat-detail__facts th,
.flat-detail__facts td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  vertical-align: top;
}

.flat-detail__facts th {
  width: 55%;
  font-weight: 700;
  color: var(--color-caption-gray);
  font-size: var(--fs-link);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

.flat-detail__status-pill {
  display: inline-block;
  padding: 2px var(--space-3);
  border: var(--border-hard) solid var(--status-border, #1f7a3a);
  background: var(--status-bg, #eaf6ee);
  color: var(--status-strong, #14532d);
  font-weight: 700;
  text-transform: capitalize;
}

.flat-detail__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.flat-detail__features li::before {
  content: "—";
  margin-right: var(--space-2);
  color: var(--color-caption-gray);
}

.flat-detail__description {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.flat-detail__description p {
  margin-block: var(--space-3);
}

.flat-detail__description h2,
.flat-detail__description h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-page-ink);
  margin-block: var(--space-5) var(--space-3);
}

.flat-detail__description h2 {
  font-size: var(--fs-display-mid);
  line-height: var(--lh-display-mid);
}

.flat-detail__description h3 {
  font-size: var(--fs-display-small, 1.5rem);
  line-height: 1.25;
}

.room {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-7);
}

.room__label {
  /* uses .eyebrow class */
}

.room__media {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-hairline-tint);
  max-height: 80vh;
  overflow: hidden;
}

.room__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

.room__caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-caption-gray);
  font-style: italic;
}

/* ----- Pair: Originalfoto links, Slider/Tile rechts ----- */
.room__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 720px) {
  .room__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Force the slider on the right to match the original tile on the left:
   same 4/3 box, image cover-fits like the tile does. */
.room__pair > .comparison-slider .comparison-slider__viewport {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--color-ink);
  overflow: hidden;
}
.room__pair > .comparison-slider .comparison-slider__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.room__pair > .comparison-slider .comparison-slider__after {
  object-fit: cover;
}

/* ----- Triptych: original | nach Sanierung | möbliert ----- */
.room__triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 720px) {
  .room__triptych--2 { grid-template-columns: repeat(2, 1fr); }
  .room__triptych--3 { grid-template-columns: repeat(3, 1fr); }
}
.room__tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.room__tile__media {
  display: block;
  background: var(--color-hairline-tint);
  border: 2px solid var(--color-ink);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  outline-offset: 2px;
}
.room__tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.room__tile__media:hover img,
.room__tile__media:focus-visible img {
  transform: scale(1.03);
}
.room__tile__caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-caption-gray);
}

/* ============================================================
 * Before/After comparison slider
 * ============================================================ */

.comparison-slider {
  position: relative;
  width: 100%;
  margin: 0;
  --position: 50%;
  user-select: none;
}

.comparison-slider__viewport {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-hairline-tint);
}

.comparison-slider__viewport img {
  display: block;
}

.comparison-slider__before {
  /* In normal flow — defines the viewport's intrinsic dimensions.
     Scales down to fit both width and height constraints while
     preserving aspect ratio, so neither portrait nor landscape
     photos get cropped. */
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
}

.comparison-slider__after {
  /* "Furnished" overlay stacked on top, clipped to the right of the slider position */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--position));
}

.comparison-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: var(--border-hard);
  background: var(--color-ink-black);
  pointer-events: none;
  transform: translateX(-50%);
}

.comparison-slider__handle {
  position: absolute;
  top: 50%;
  left: var(--position);
  width: 32px;
  height: 32px;
  background: var(--color-paper);
  border: var(--border-hard) solid var(--color-ink-black);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--color-ink-black);
}

.comparison-slider__range {
  /* Native range input — the source of truth, accessible by default */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.comparison-slider__range:focus-visible + .comparison-slider__divider {
  background: var(--color-link-blue);
}

.comparison-slider__caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-caption-gray);
  padding-top: var(--space-2);
  border-top: var(--border-hairline) solid var(--color-hairline-tint);
  margin-top: var(--space-2);
}

/* Drag-hint label sitting next to the handle, fades out on first interaction */
.comparison-slider__hint {
  position: absolute;
  top: 50%;
  left: var(--position);
  transform: translate(calc(16px + var(--space-2)), -50%);
  background: var(--color-ink-black);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.comparison-slider[data-untouched] .comparison-slider__hint {
  opacity: 1;
  animation: slider-hint-pulse 1.6s ease-in-out 0.4s 3;
}

.comparison-slider[data-untouched] .comparison-slider__handle {
  animation: slider-handle-nudge 1.6s ease-in-out 0.4s 3;
}

@keyframes slider-hint-pulse {
  0%,
  100% { opacity: 1; transform: translate(calc(16px + var(--space-2)), -50%); }
  50%  { opacity: 0.6; transform: translate(calc(24px + var(--space-2)), -50%); }
}

@keyframes slider-handle-nudge {
  0%,
  100% { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-slider[data-untouched] .comparison-slider__hint,
  .comparison-slider[data-untouched] .comparison-slider__handle {
    animation: none;
  }
}

/* ============================================================
 * Thumbnail gallery (detail page)
 * ============================================================ */

.thumb-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.thumb-gallery__item {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  border: var(--border-hairline) solid var(--color-hairline-tint);
  background: var(--color-hairline-tint);
  transition: border-color 120ms ease;
}

.thumb-gallery__item:hover,
.thumb-gallery__item:focus-visible {
  border-color: var(--color-ink-black);
  outline: none;
}

.thumb-gallery__item img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.thumb-gallery__label {
  display: block;
  padding: var(--space-2) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-caption-gray);
  border-top: var(--border-hairline) solid var(--color-hairline-tint);
  background: var(--color-paper);
}

.thumb-gallery__item:hover .thumb-gallery__label,
.thumb-gallery__item:focus-visible .thumb-gallery__label {
  color: var(--color-ink-black);
}

/* Smooth-scroll to room anchor */
html {
  scroll-behavior: smooth;
}

.room {
  scroll-margin-top: var(--space-6);
}

/* ============================================================
 * Description + map two-column overview
 * ============================================================ */

.flat-detail__overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .flat-detail__overview {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    align-items: start;
  }
}

.flat-detail__map {
  margin: 0;
}

.flat-detail__aside {
  margin: 0;
}

/* ============================================================
 * Detail page — Anfrage / Export action row
 * ============================================================ */

.flat-detail__cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn--export {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-paper);
  color: var(--color-ink-black);
  border-color: var(--color-ink-black);
}

.btn--export:hover,
.btn--export:focus-visible {
  background: var(--color-ink-black);
  color: var(--color-paper);
}

/* ============================================================
 * Print stylesheet — "Save as PDF" / paper output
 * Strips chrome, reflows the detail page so a single flat fits
 * cleanly across A4 pages with all photos visible.
 * ============================================================ */

@media print {
  /* General reset for paper */
  :root {
    --color-link-blue: #000000;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt;
  }

  body {
    margin: 0;
  }

  @page {
    size: A4;
    margin: 14mm 12mm;
  }

  /* Hide everything that's not the page content */
  .site-header,
  .site-footer,
  .ribbon,
  .no-print,
  [data-nav-toggle],
  [data-nav-backdrop],
  .flat-card__actions,
  .flat-detail__cta,
  form,
  .search,
  .map-embed iframe,
  video {
    display: none !important;
  }

  /* Page width fills the printable area */
  .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .section {
    margin-block: 6mm !important;
    padding-block: 0 !important;
  }

  /* Headlines stay visible but smaller */
  .headline-hero {
    font-size: 22pt;
    line-height: 1.15;
    margin-block-end: 4mm;
  }

  .headline-mid {
    font-size: 14pt;
    line-height: 1.2;
    margin-block: 5mm 2mm;
    page-break-after: avoid;
  }

  /* Two-column top: facts + hero, side by side */
  .flat-detail__top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6mm !important;
    margin-block-end: 6mm !important;
  }

  .flat-detail__overview {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4mm !important;
  }

  .flat-detail__map {
    display: none !important;
  }

  /* Facts table: tight, readable */
  .flat-detail__facts th,
  .flat-detail__facts td {
    padding: 1mm 2mm !important;
    font-size: 9.5pt !important;
  }

  /* Status pill — keep the outline, drop the colored background */
  .flat-detail__status-pill {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
  }

  /* Hero image — fixed size so it doesn't push the facts to page 2 */
  .flat-detail__hero {
    margin: 0 !important;
  }

  .flat-detail__hero img {
    width: 100% !important;
    max-height: 90mm !important;
    object-fit: cover !important;
  }

  /* Galerie thumbs: 3-up grid */
  .thumb-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3mm !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .thumb-gallery__item img {
    width: 100% !important;
    height: 40mm !important;
    object-fit: cover !important;
  }

  .thumb-gallery__label {
    font-size: 8pt !important;
  }

  /* Features as a 2-col list */
  .flat-detail__features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1mm 4mm !important;
    font-size: 10pt;
  }

  /* Comparison sliders: print only the "before" image (first child),
     drop interactive overlays */
  .comparison-slider__after,
  .comparison-slider__divider,
  .comparison-slider__handle,
  .comparison-slider__range,
  .comparison-slider__hint {
    display: none !important;
  }

  .comparison-slider,
  .comparison-slider__viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .comparison-slider__before,
  .room__media img {
    width: 100% !important;
    max-height: 110mm !important;
    object-fit: contain !important;
  }

  /* Triptych: keep all tiles, but cap their height so they fit a print page. */
  .room__triptych {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4mm !important;
  }
  .room__triptych--2 { grid-template-columns: repeat(2, 1fr) !important; }
  .room__tile__media {
    aspect-ratio: 4 / 3 !important;
    border-width: 1px !important;
  }
  .room__tile__media img {
    object-fit: cover !important;
  }

  /* Pair: print original + slider's "before" frame as a 2-up. */
  .room__pair {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4mm !important;
  }
  .room__pair .comparison-slider__viewport {
    width: 100% !important;
  }
  .room__pair .comparison-slider__before {
    width: 100% !important;
    max-height: 90mm !important;
    object-fit: contain !important;
  }

  /* Each room article + Das-Haus item starts on a fresh block
     and isn't split awkwardly across pages */
  .room {
    page-break-inside: avoid;
    margin-block: 4mm !important;
  }

  /* Links: show the URL after the link text in print */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
  }

  /* Don't expand links inside the facts table or to internal anchors */
  .flat-detail__facts a::after,
  a[href^="#"]::after,
  a[href^="/"]::after {
    content: "" !important;
  }
}

.flat-detail__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-end: var(--space-6);
}

@media (min-width: 900px) {
  .flat-detail__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.flat-detail__hero {
  margin: 0;
  border: var(--border-hard) solid var(--color-ink-black);
  background: var(--color-hairline-tint);
  overflow: hidden;
  line-height: 0;
}

.flat-detail__hero a {
  display: block;
  line-height: 0;
}

.flat-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stack hero + floorplan in the right-hand column with identical box sizes. */
.flat-detail__media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.flat-detail__media-stack .flat-detail__media {
  margin: 0;
  border: var(--border-hard) solid var(--color-ink-black);
  background: var(--color-hairline-tint);
  overflow: hidden;
  line-height: 0;
}
.flat-detail__media-stack .flat-detail__media a {
  display: block;
  line-height: 0;
  height: 100%;
}
.flat-detail__media-stack .flat-detail__media {
  /* Fixed shared aspect ratio so both tiles have the same height. */
  aspect-ratio: 4 / 3;
}
.flat-detail__media-stack .flat-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flat-detail__media-stack .flat-detail__floorplan img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-paper);
}
.flat-detail__media__caption {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-caption-gray);
  background: var(--color-paper);
  border-top: var(--border-hairline) solid var(--color-hairline-tint);
  line-height: 1.4;
}

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--border-hard) solid var(--color-ink-black);
  background: var(--color-hairline-tint);
  overflow: hidden;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-embed__caption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-caption-gray);
}

/* ============================================================
 * Responsive (DESIGN.md §8)
 * ============================================================ */

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-tablet);
  }

  .search {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: end;
  }

  .flat-card {
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "hero header"
      "hero summary"
      "hero body";
    grid-template-rows: auto auto 1fr;
    gap: var(--space-3) var(--space-5);
    align-items: start;
  }

  .flat-detail__features {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
  }

  .ribbon {
    padding-inline: var(--container-pad-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--container-pad-desktop);
  }

  .headline-hero {
    /* Token already at 64px desktop */
  }

  .ribbon {
    padding-inline: var(--container-pad-desktop);
  }
}

/* Mobile: scale hero down (DESIGN.md §8: 64px → ~36px) */
@media (max-width: 767px) {
  .headline-hero {
    font-size: 2.25rem; /* ~36px */
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Card title: smaller and word-breaking for long German titles */
  .flat-card__title {
    font-size: 1.35rem; /* ~22px */
  }

  /* Eyebrow lines can get long with PLZ + Stadt + Bezirk + Zimmer + Status */
  .eyebrow {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Green key-facts box: stack cleanly instead of single-line overflow */
  .flat-card__facts--key {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  .flat-card__facts__avail {
    margin-left: 0;
    flex-basis: 100%;
  }

  /* Card thumbnail strip: 3 columns on phones, otherwise rooms get smushed */
  .flat-card__gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Keep flat-detail facts table from forcing horizontal scroll */
  .flat-detail__facts th,
  .flat-detail__facts td {
    overflow-wrap: anywhere;
  }

  /* Detail page features list: single column on mobile (it's 2-col on tablet) */
  .flat-detail__features {
    grid-template-columns: 1fr;
  }

  /* Strong, unambiguous separation between flat cards on mobile */
  .flat-list {
    gap: 0;
  }

  .flat-list > li {
    padding-block: var(--space-6);
    border-bottom: var(--border-hard) solid var(--color-ink-black);
  }

  .flat-list > li:first-child {
    padding-top: 0;
  }

  .flat-list > li:last-child {
    border-bottom: 0;
  }

  /* Hide the inline hairline divider — the bottom border replaces it */
  .flat-list .hairline {
    display: none;
  }
}