/* ═══════════════════════════════════════════════════════════════
   Bad Soden – apartment detail page styles
   Depends on trio.css (variables + shared components)
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs ────────────────────────────────────────────── */
.tr-crumbs {
  background: var(--tr-brown);
  padding: 14px 0;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.tr-crumbs .tr-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
}
.tr-crumbs a {
  color: var(--tr-copper-3);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.tr-crumbs a:hover { color: #fff; }
.tr-crumb-sep { margin: 0 10px; color: rgba(255,255,255,0.3); }
/* Current crumb (e.g. "W1 · Wilhelm 1") must stay on one line so the
   trailing digit never wraps to its own row. On very narrow screens
   the whole crumb wraps to the next line as a unit instead. */
.tr-crumb-cur { color: #fff; white-space: nowrap; }

/* ── Apartment hero ─────────────────────────────────────────── */
.tr-d-hero {
  background: var(--tr-cream);
  padding: 72px 0 80px;
}
.tr-d-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  /* Vertically center the right-hand facts box with the left content
     block. Previously aligned to top + had a hard-coded 70px nudge —
     looked unbalanced once the left column grew (subtitle, price,
     CTAs, share row). Centering keeps the facts box visually anchored
     next to the price card regardless of how tall the left side is. */
  align-items: center;
}
.tr-d-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tr-d-code {
  font-family: var(--tr-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--tr-copper);
  letter-spacing: 0.04em;
  text-transform: none;
}
.tr-d-sep {
  width: 1px;
  height: 22px;
  background: var(--tr-line);
}
.tr-d-house { color: var(--tr-muted); font-weight: 600; }

.tr-d-status {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.tr-st-ok   { background: #e8f0e3; color: #4a6b3a; }
.tr-st-res  { background: #fdf0dc; color: #a16420; }
.tr-st-sold { background: #f0e2dd; color: #853b2a; }
.tr-st-ask  { background: var(--tr-stone); color: var(--tr-brown); }

.tr-d-title {
  font-family: var(--tr-serif);
  font-size: clamp(42px, 5.5vw, 78px);
  font-weight: 500;
  line-height: 1.02;
  color: var(--tr-brown);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.tr-d-tagline {
  font-size: 17px;
  color: var(--tr-muted);
  margin-bottom: 36px;
  line-height: 1.5;
}

.tr-d-price-row {
  padding: 24px 28px;
  background: #fff;
  border-left: 3px solid var(--tr-copper);
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tr-d-price-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tr-muted);
}
.tr-d-price-value {
  font-family: var(--tr-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  font-style: italic;
  color: var(--tr-brown);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  letter-spacing: 0.005em;
}
.tr-d-price-value sup {
  font-family: var(--tr-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--tr-copper);
  vertical-align: super;
}
.tr-d-price-sold {
  color: #853b2a;
  text-transform: uppercase;
  font-size: 28px;
  font-style: normal;
  letter-spacing: 0.04em;
}
.tr-d-reserved-tag {
  font-family: var(--tr-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  background: #fdf0dc;
  color: #a16420;
  border-radius: 100px;
}

.tr-d-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tr-btn-ghost-dark {
  background: transparent;
  color: var(--tr-brown);
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1.5px solid var(--tr-line);
  display: inline-block;
  transition: all .25s;
  font-family: var(--tr-sans);
}
.tr-btn-ghost-dark:hover { border-color: var(--tr-copper); color: var(--tr-copper); }

/* ── Key facts panel ───────────────────────────────────────── */
.tr-d-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--tr-line);
  border: 1px solid var(--tr-line);
}
.tr-d-fact {
  background: #fff;
  padding: 28px 24px;
  text-align: center;
}
.tr-d-fact-highlight { background: var(--tr-stone); }
.tr-d-fact-n {
  font-family: var(--tr-serif);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 500;
  color: var(--tr-brown);
  line-height: 1;
}
.tr-d-fact-highlight .tr-d-fact-n { color: var(--tr-copper); }
.tr-d-fact-l {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tr-muted);
  margin-top: 10px;
  line-height: 1.3;
}

/* ── Address strip ─────────────────────────────────────────────
   Replaces the old highlights strip. Keeps the same dark band but
   centers a single address line as the visual hero of the strip. */
.tr-d-address-strip {
  background: var(--tr-brown);
  padding: 22px 0;
  color: #fff;
}
.tr-d-addr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.tr-d-addr-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tr-copper-3);
}
.tr-d-addr-eyebrow {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tr-copper-3);
  font-weight: 700;
}
.tr-d-addr-line {
  font-family: var(--tr-serif);
  font-size: 18px;
  color: #fff;
}
.tr-d-addr-sep {
  color: rgba(255,255,255,0.4);
}
.tr-d-addr-city {
  color: rgba(255,255,255,0.85);
}
@media (max-width: 720px) {
  .tr-d-addr {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .tr-d-addr-sep { display: none; }
  .tr-d-addr-line { font-size: 16px; }
  .tr-d-addr-eyebrow { margin-top: 4px; }
}

/* ── Description block ─────────────────────────────────────── */
.tr-d-desc {
  background: var(--tr-cream);
  padding: 64px 0 80px;
}
.tr-d-desc-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
/* Push the description column down so its first line aligns roughly with
   the title's baseline on the left. The padding-top value matches the
   combined height of the eyebrow line (≈18px) + h2 top margin (14px) +
   most of the title's cap height — feels right at desktop sizes.
   Mobile (≤960px) collapses the grid to a single column and resets this
   so there's no awkward gap above the description. */
.tr-d-desc-grid > div:nth-child(2) {
  padding-top: 58px;
}
.tr-d-desc p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--tr-muted);
}

/* ── Floor plan viewer ─────────────────────────────────────── */
.tr-d-plan {
  background: var(--tr-stone);
  padding: 100px 0;
  position: relative;
}
.tr-d-plan::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(58,42,30,0.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.tr-d-plan .tr-sec-head { text-align: center; margin-bottom: 48px; position: relative; }
.tr-d-plan-frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: var(--tr-shadow);
  background: #fff;
  padding: 8px;
}
.tr-d-plan-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.tr-d-plan-zoom {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: var(--tr-brown);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-family: var(--tr-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
}
.tr-d-plan-zoom:hover { background: var(--tr-copper); }
.tr-d-plan-note {
  text-align: center;
  font-size: 12px;
  color: var(--tr-muted);
  font-style: italic;
  margin-top: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* ── Rooms breakdown ───────────────────────────────────────── */
.tr-d-rooms {
  background: var(--tr-cream);
  padding: 120px 0;
}
.tr-d-rooms .tr-sec-head { text-align: center; margin-bottom: 56px; }
.tr-d-rooms .tr-sec-head .tr-eyebrow { display: inline-flex; }
.tr-d-rooms-table {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 48px;
  box-shadow: var(--tr-shadow-sm);
  border-left: 3px solid var(--tr-copper);
}

/* ── Impressions section (gallery + breakdown sidebar) ─────────
   Mirrors the Hofheim layout: 2-column row with photo grid on the
   left and the apartment-breakdown panel on the right. Photos come
   from per-apartment admin uploads (⑤ Medien → Galerie). */
.tr-d-impressions {
  background: var(--tr-cream);
  padding: 64px 0 48px;
}
.tr-d-impressions .tr-sec-head { text-align: center; margin-bottom: 40px; }
.tr-d-impressions .tr-sec-head .tr-eyebrow { display: inline-flex; }
.tr-d-impressions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .tr-d-impressions-grid { grid-template-columns: 1fr; }
}
/* Photos: 2x2 grid of 4 photos, equal sized */
.tr-d-impressions-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tr-d-impressions-photos.is-empty {
  grid-template-columns: 1fr;
  min-height: 320px;
}
.tr-d-impressions-empty {
  background: #fff;
  border: 1px dashed rgba(58,42,30,0.20);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--tr-muted);
  text-align: center;
  padding: 60px 24px;
}
.tr-d-impressions-empty svg { color: var(--tr-line); }
.tr-d-impressions-empty p { margin: 0; font-size: 14px; }
.tr-d-impressions-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  transition: transform .25s ease;
}
.tr-d-impressions-item:hover { transform: scale(1.01); }
.tr-d-impressions-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.tr-d-impressions-item:hover img { transform: scale(1.04); }
.tr-d-impressions-note {
  /* Left-aligned under the gallery — matches the left edge of the
     first row of images. Previously centered on the page, which
     felt detached from the imagery it describes. */
  text-align: left;
  font-family: var(--tr-sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--tr-muted);
  font-style: italic;
  letter-spacing: 0.3px;
  margin: 24px 0 0;
  max-width: 900px;
}
@media (max-width: 720px) {
  .tr-d-impressions-note { font-size: 11px; margin-top: 18px; }
}

/* Photo lightbox (mirrors the floor-plan lightbox styling) */
.tr-photolb {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.tr-photolb.is-open { display: flex; }
.tr-photolb-inner {
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-photolb-inner img {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.tr-photolb-close,
.tr-photolb-prev,
.tr-photolb-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-photolb-close { top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; }
.tr-photolb-prev,
.tr-photolb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 32px; }
.tr-photolb-prev  { left: 24px; }
.tr-photolb-next  { right: 24px; }
.tr-photolb-close:hover,
.tr-photolb-prev:hover,
.tr-photolb-next:hover { background: rgba(255, 255, 255, 0.18); }
@media (max-width: 720px) {
  .tr-photolb-prev  { left: 8px; }
  .tr-photolb-next  { right: 8px; }
}

/* Right-side panel: apartment breakdown (Wohnfläche / Außen / Total) */
.tr-d-rooms-panel {
  background: #fff;
  border-left: 3px solid var(--tr-copper);
  box-shadow: var(--tr-shadow-sm);
  padding: 28px 28px;
}
.tr-d-rooms-panel-head {
  text-align: left;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(58,42,30,0.10);
  margin-bottom: 8px;
}
.tr-d-rooms-panel-head .tr-eyebrow { margin-bottom: 6px; }
.tr-d-rooms-panel-title {
  font-family: var(--tr-serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--tr-ink);
}
.tr-d-rooms-panel .tr-d-rooms-table {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-left: 0;
  max-width: none;
}
.tr-d-rooms-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(58,42,30,0.08);
}
.tr-d-rooms-row:last-child { border-bottom: none; }
.tr-d-rooms-name {
  font-size: 15px;
  color: var(--tr-ink);
}
.tr-d-rooms-dots {
  border-bottom: 1px dotted var(--tr-line);
  transform: translateY(-4px);
}
.tr-d-rooms-size {
  font-family: var(--tr-serif);
  font-size: 16px;
  color: var(--tr-brown);
  font-weight: 500;
  white-space: nowrap;
}
.tr-d-rooms-total {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--tr-brown);
}
.tr-d-rooms-total .tr-d-rooms-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.tr-d-rooms-total .tr-d-rooms-size {
  font-size: 22px;
  color: var(--tr-copper);
}

/* ── Location mini ─────────────────────────────────────────── */
.tr-d-loc {
  background: var(--tr-cream);
  padding: 0 0 120px;
}
.tr-d-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.tr-d-loc p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tr-muted);
  margin-top: 18px;
  margin-bottom: 24px;
}
.tr-d-loc-addr {
  padding: 20px;
  background: var(--tr-brown);
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  border-left: 3px solid var(--tr-copper);
}
.tr-d-loc-addr strong {
  font-family: var(--tr-serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--tr-copper-3);
}

/* ── Prev / Next / All ─────────────────────────────────────── */
.tr-d-other {
  background: var(--tr-stone);
  padding: 56px 0;
}
.tr-d-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.tr-d-nav-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .25s;
}
.tr-d-nav-prev { text-align: left; }
.tr-d-nav-next { text-align: right; }
.tr-d-nav-prev:hover { transform: translateX(-6px); }
.tr-d-nav-next:hover { transform: translateX(6px); }
.tr-d-nav-dir {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tr-copper);
  font-weight: 700;
}
.tr-d-nav-name {
  font-family: var(--tr-serif);
  font-size: 22px;
  color: var(--tr-brown);
}
.tr-d-nav-all {
  padding: 14px 28px;
  border: 1.5px solid var(--tr-brown);
  color: var(--tr-brown);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.tr-d-nav-all:hover { background: var(--tr-brown); color: #fff; }

/* ── Disclaimer text ───────────────────────────────────────── */
.tr-disclaimer {
  max-width: 900px;
  margin: 32px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tr-muted);
  text-align: center;
  font-style: italic;
}
.tr-disclaimer sup {
  color: var(--tr-copper);
  font-weight: 700;
  font-style: normal;
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 960px) {
  .tr-d-hero { padding: 48px 0 60px; }
  .tr-d-hero-grid,
  .tr-d-desc-grid,
  .tr-d-loc-grid { grid-template-columns: 1fr; gap: 40px; }
  .tr-d-desc-grid > div:nth-child(2) { padding-top: 0; }
  .tr-d-desc, .tr-d-rooms { padding: 72px 0; }
  .tr-d-plan { padding: 60px 0; }
  .tr-d-rooms-table { padding: 28px 24px; }
  .tr-d-nav { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .tr-d-nav-prev, .tr-d-nav-next { text-align: center; }
  .tr-d-nav-prev:hover, .tr-d-nav-next:hover { transform: none; }
}
@media (max-width: 560px) {
  .tr-d-facts { grid-template-columns: 1fr 1fr; }
  .tr-d-plan-zoom span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ADDITIONS — May 2026
   Detail-page extras: subtag (Wohnfläche line), price-meta breakdown,
   Mietkosten card + extras grid, Energieausweis block, Ausstattung
   amenities grid, pet-warning callout, reserved-tag pill.
   These mirror the Hofheim equivalents (hf-d-* → tr-d-*).
   ═══════════════════════════════════════════════════════════════ */

.tr-d-subtag {
  font-size: 14px;
  color: var(--tr-muted);
  margin: -8px 0 18px;
  letter-spacing: 0.2px;
}
.tr-d-fact-note {
  font-size: 10px;
  color: var(--tr-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-left: 2px;
}
.tr-d-price-sub {
  display: inline-block;
  font-weight: 400;
  font-size: 11px;
  color: var(--tr-muted);
  text-transform: none;
  letter-spacing: 0.3px;
  margin-left: 4px;
}
.tr-d-price-unit {
  font-family: var(--tr-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--tr-muted);
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.tr-d-price-meta {
  font-size: 13px;
  color: var(--tr-muted);
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.tr-d-reserved-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--tr-copper);
  color: #fff;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: middle;
}

/* ── Mietkosten section ─────────────────────────────────────── */
.tr-d-cost {
  padding: 64px 0;
  background: var(--tr-cream);
}
.tr-d-cost-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 32px auto 0;
  gap: 24px;
}
@media (max-width: 720px) {
  .tr-d-cost-grid { max-width: none; }
}
.tr-d-cost-card {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: 4px;
  padding: 24px 28px;
}
.tr-d-cost-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--tr-line);
}
.tr-d-cost-card-title {
  font-family: var(--tr-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--tr-copper);
  font-weight: 600;
}
.tr-d-cost-tbl {
  width: 100%;
  border-collapse: collapse;
}
.tr-d-cost-tbl th,
.tr-d-cost-tbl td {
  padding: 10px 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--tr-line);
  font-weight: 400;
}
.tr-d-cost-tbl td {
  text-align: right;
  /* Numbers use a stack with confirmed tabular digits. Playfair Display
     (the brand serif) has no tabular variant, so tabular-nums on it has
     no effect — different glyph widths leave the cents column ragged.
     Falling back to Source Serif Pro / Charter / Cambria gives the same
     editorial feel with monospace digits, then ultimately a true
     monospace as the last resort. */
  font-family: 'Source Serif Pro', 'Charter', 'Cambria', 'Iowan Old Style',
               'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 17px;
  color: var(--tr-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.tr-d-cost-tbl tr:last-child th,
.tr-d-cost-tbl tr:last-child td {
  border-bottom: none;
}
.tr-d-cost-total th,
.tr-d-cost-total td {
  font-weight: 600;
  color: var(--tr-brown);
  padding-top: 14px;
}
.tr-d-cost-total td {
  font-size: 22px;
  color: var(--tr-copper);
}
.tr-d-cost-note {
  font-size: 11px;
  color: var(--tr-muted);
  font-weight: 400;
  letter-spacing: 0.2px;
}
.tr-d-cost-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: 4px;
}
@media (max-width: 720px) {
  .tr-d-cost-extras { grid-template-columns: 1fr; gap: 12px; }
}
.tr-d-cost-extra {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tr-d-cost-extra-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tr-muted);
  font-weight: 600;
}
.tr-d-cost-extra-v {
  font-size: 14px;
  color: var(--tr-ink);
}

/* ── Energieausweis block ───────────────────────────────────── */
.tr-d-energy {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--tr-stone);
  border-left: 3px solid var(--tr-copper);
  font-size: 13px;
  color: var(--tr-brown);
  line-height: 1.6;
}
.tr-d-energy-l {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--tr-copper);
  margin-right: 8px;
}
.tr-d-energy-pending {
  font-style: italic;
  color: var(--tr-muted);
}

/* ── Ausstattung (amenities) grid ───────────────────────────── */
.tr-d-amenities {
  background: var(--tr-cream);
  padding: 80px 0;
  border-top: 1px solid var(--tr-line);
}
.tr-d-amenities-intro {
  color: var(--tr-muted);
  font-size: 15px;
  max-width: 620px;
  margin: 8px auto 0;
  line-height: 1.55;
  text-align: center;
}
.tr-d-amenities .tr-sec-head { text-align: center; margin-bottom: 36px; }
.tr-d-amen-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px;
  margin-top: 36px;
}
@media (max-width: 1000px) {
  .tr-d-amen-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .tr-d-amen-grid { grid-template-columns: 1fr; gap: 24px; }
  .tr-d-amenities { padding: 56px 0; }
}
.tr-d-amen-col {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: 4px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.tr-d-amen-title {
  font-family: var(--tr-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tr-brown);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tr-line);
}
.tr-d-amen-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.tr-d-amen-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  list-style: none;
}
.tr-d-amen-list li svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  color: var(--tr-sage);
  margin-top: 2px;
  display: block;
}
.tr-d-amen-list li b {
  font-weight: 600;
  color: var(--tr-ink);
  display: block;
}
.tr-d-amen-list li small {
  display: block;
  font-size: 12px;
  color: var(--tr-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.tr-d-amen-specifics {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--tr-stone);
  border-radius: 3px;
  border-left: 3px solid var(--tr-copper);
}
.tr-d-amen-specifics-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tr-brown);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-d-amen-badge {
  display: inline-block;
  padding: 3px 9px;
  background: var(--tr-copper);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tr-d-amen-specifics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tr-d-amen-specifics-list li {
  font-size: 13.5px;
  color: var(--tr-ink);
  font-weight: 500;
  position: relative;
  padding-left: 18px;
  list-style: none;
}
.tr-d-amen-specifics-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--tr-copper);
  font-weight: 700;
}

/* ── Pet warning callout ─────────────────────────────────────── */
.tr-d-pets-warn {
  margin-top: 22px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(198, 70, 70, 0.30);
  border-left: 4px solid #c64646;
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tr-d-pets-warn svg {
  width: 22px !important;
  height: 22px !important;
  color: #c64646;
  flex-shrink: 0;
  margin-top: 1px;
  display: block;
}
.tr-d-pets-warn b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c64646;
  margin-bottom: 4px;
}
.tr-d-pets-warn span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tr-muted);
  display: block;
}

/* ── Share row (WhatsApp, Email, Copy link) ───────────────────── */
.tr-d-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
}
.tr-d-share-l {
  color: var(--tr-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.tr-d-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--tr-line);
  border-radius: 999px;
  background: transparent;
  color: var(--tr-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tr-d-share-btn:hover {
  border-color: var(--tr-copper);
  color: var(--tr-copper);
  background: rgba(0,0,0,0.02);
}
.tr-d-share-btn svg { flex-shrink: 0; }
.tr-d-share-btn.is-copied {
  border-color: var(--tr-copper);
  color: var(--tr-copper);
}

/* ── Empty-state for missing floor plan ─────────────────────── */
.tr-d-plan-frame--empty {
  background: rgba(0,0,0,.02);
  border: 1px dashed var(--tr-line);
  border-radius: 6px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-d-plan-empty {
  text-align: center;
  color: var(--tr-muted);
  padding: 40px 24px;
  max-width: 480px;
}
.tr-d-plan-empty svg {
  opacity: 0.4;
  margin-bottom: 16px;
}
.tr-d-plan-empty p {
  margin: 0 0 6px;
  font-family: var(--tr-serif);
  font-size: 18px;
  color: var(--tr-ink);
}
.tr-d-plan-empty-sub {
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--tr-muted) !important;
}
/* ══════════════ MOBILE FIXES — Impressions section ══════════════ */
@media (max-width: 720px) {
  /* Reduce vertical padding so the section isn't a wall of empty space on phones */
  .tr-d-impressions { padding: 64px 0; }
  .tr-d-impressions .tr-sec-head { margin-bottom: 24px; }

  /* Photos: 2 columns is fine on phones, smaller gap */
  .tr-d-impressions-photos { gap: 8px; }

  /* Empty state: keep tidy */
  .tr-d-impressions-empty { padding: 40px 16px; }

  /* Apartment-breakdown panel: tighter padding so it doesn't feel cramped */
  .tr-d-rooms-panel { padding: 22px 20px; }
  .tr-d-rooms-panel-title { font-size: 18px; }

  /* Breakdown rows: stop labels wrapping awkwardly across two lines.
     The desktop styles use uppercase + 1.5px letter-spacing + 12px font,
     which packs tightly on a narrow phone column. Drop the spacing,
     wrap allowed but at a smaller-feeling density. */
  .tr-d-rooms-total .tr-d-rooms-name {
    font-size: 11px;
    letter-spacing: 0.8px;
    line-height: 1.35;
  }
  .tr-d-rooms-total .tr-d-rooms-size { font-size: 18px; }
  .tr-d-rooms-row { gap: 10px; padding: 10px 0; }
  /* Hide dotted separator — useless on narrow screens, looks broken */
  .tr-d-rooms-dots { display: none; }
  .tr-d-rooms-row { grid-template-columns: 1fr auto; }
}

/* Mobile: hero CTAs (Jetzt anfragen + Grundriss ansehen) stack full-width
   so the filled and outline buttons match instead of one being narrower
   than the other based on text length. */
@media (max-width: 720px) {
  .tr-d-hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tr-d-hero-cta .tr-btn-primary,
  .tr-d-hero-cta .tr-btn-ghost-dark {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}