/*
  Tuchfabrik Berlin — Einheiten-Detailseite (Mastertemplate)
  Quelle: tuchfabrik_einheit01_designsystem_3.html (Konzept-Prototyp V1.2).
  Gilt für alle 6 Einheiten-Detailseiten (DE + EN). Buttons/Header/Footer
  nutzen die sitesweiten Klassen aus base.css, nicht eigene .button-Klassen.
*/

/* ---------- Entwurfs-Banner mit Detailaufklappung ---------- */
.dev-banner {
  background: var(--status-prep-bg); color: var(--status-prep);
  border-bottom: 1px solid var(--line); font-size: .82rem;
}
.dev-banner .wrap { padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dev-banner strong { letter-spacing: .06em; text-transform: uppercase; }
.dev-banner details { margin-left: auto; }
.dev-banner summary { cursor: pointer; font-weight: 700; }
.dev-banner .dev-details { max-width: 760px; padding: 10px 0 4px; color: var(--ink-muted); }

/* ---------- Hero ---------- */
.unit-hero { padding: 20px 0 28px; }
.hero-media {
  position: relative; min-height: clamp(480px, 68vh, 700px);
  overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-note-tag, .media-dev-label {
  position: absolute; z-index: 3; top: 18px; right: 18px;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: .67rem; line-height: 1.2;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.media-note-tag { background: var(--card-bg); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); }
.media-dev-label { background: var(--status-prep-bg); border: 1px solid var(--status-prep); color: var(--status-prep); }

.hero-panel {
  position: absolute; z-index: 4; left: clamp(18px, 5vw, 56px); bottom: clamp(18px, 5vw, 56px);
  width: min(620px, calc(100% - 40px)); padding: clamp(24px, 4vw, 42px);
  color: #f6f6f4; background: linear-gradient(135deg, var(--glass), var(--glass-soft));
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  backdrop-filter: blur(16px); box-shadow: 0 24px 80px rgba(12,13,16,.28);
}
.hero-panel .kicker { color: rgba(255,255,255,.72); }
.hero-panel h1 { color: #fff; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 7px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); font-family: var(--font-body);
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-frei); box-shadow: 0 0 0 4px rgba(47,158,82,.32); display: inline-block; }
.status-dot.ab { background: var(--status-prep); box-shadow: 0 0 0 4px rgba(201,140,31,.32); }
.hero-copy { margin-top: 18px; max-width: 58ch; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.5vw, 1.1rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.fact-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.fact {
  min-height: 118px; padding: 20px 20px 16px; border: 1px solid var(--line);
  border-top: 3px solid var(--brand-slate); border-radius: var(--radius); background: var(--card-bg);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
}
.fact strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1; }
.fact span { color: var(--ink-muted); font-size: .78rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 116px) 0; border-top: 1px solid var(--line); }
.section--warm { background: var(--surface); }
.section .section-head { grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr); display: grid; align-items: start; }
.section .section-head > .kicker { margin-top: 8px; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.prose { max-width: var(--reading-width); display: grid; gap: 16px; color: var(--ink-muted); font-size: clamp(1rem, 1.3vw, 1.08rem); }
.prose strong { color: var(--ink); }

/* ---------- Bestätigte Kurzfakten (Exposé-Daten) ---------- */
.specs-list {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px); display: grid; gap: 2px;
}
.specs-list .spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.specs-list .spec-row:last-child { border-bottom: none; }
.specs-list dt { color: var(--ink-muted); }
.specs-list dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); max-width: 60%; }
.specs-list .spec-source { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-faint); font-family: var(--font-body); }
.accent-line { width: 76px; height: 3px; border-radius: var(--radius-sm); background: var(--brand-red-d); margin-bottom: 20px; }

/* ---------- Medien-Platzhalter (noch fehlende Daten) ---------- */
.media-placeholder {
  position: relative; min-height: 250px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; text-align: center; color: var(--ink-faint); padding: 32px;
}
.media-placeholder--floorplan { min-height: 460px; background: var(--surface); }
.media-placeholder--map {
  min-height: 340px;
  background:
    linear-gradient(30deg, transparent 24%, rgba(51,55,58,.08) 25%, rgba(51,55,58,.08) 26%, transparent 27%, transparent 74%, rgba(51,55,58,.08) 75%, rgba(51,55,58,.08) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, rgba(51,55,58,.08) 25%, rgba(51,55,58,.08) 26%, transparent 27%, transparent 74%, rgba(51,55,58,.08) 75%, rgba(51,55,58,.08) 76%, transparent 77%),
    var(--surface);
  background-size: 76px 120px;
}
.placeholder-copy { position: relative; z-index: 2; max-width: 30ch; }
.placeholder-copy strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 6px; }
.placeholder-copy span { font-size: .84rem; }

.floorplan-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.floorplan-actions[hidden], .floorplan-figure[hidden], .floorplan-request[hidden], .floorplan-pdf[hidden] { display: none; }

/* ---------- Grundriss (automatisch, sobald grundriss.jpg vorliegt) ---------- */
.floorplan-request {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: clamp(36px, 6vw, 64px) 24px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
}
.floorplan-icon { width: 56px; height: 56px; color: var(--brand-red-d); margin-bottom: 6px; }
.floorplan-request strong { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); }
.floorplan-request span { color: var(--ink-muted); max-width: 46ch; }
.floorplan-request .btn { margin-top: 12px; }
.floorplan-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(12px, 3vw, 28px); }
.floorplan-figure a { display: block; cursor: zoom-in; }
.floorplan-figure img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }

/* ---------- Standort-Kurzfakten ---------- */
.location-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.location-facts .stat-card { min-height: 0; }
.btn[disabled] { cursor: not-allowed; opacity: .45; transform: none !important; }

/* ---------- Fotogalerie ---------- */
.photo-gallery-note { margin: -22px 0 24px; color: var(--ink-muted); font-size: .9rem; }
.photo-single { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg); min-height: 420px; }
.photo-single img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: start; }
.photo-card { grid-column: span 4; margin: 0; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.photo-card--feature { grid-column: span 6; }
.photo-card img { width: 100%; height: 230px; object-fit: cover; display: block; }
.photo-card--feature img { height: 330px; }
.photo-card figcaption { padding: 12px 14px 14px; font-size: .82rem; line-height: 1.4; color: var(--ink-muted); }
.photo-card figcaption strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 600; }
@media (max-width: 820px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-card, .photo-card--feature { grid-column: auto; }
  .photo-card img, .photo-card--feature img { height: 220px; }
}
@media (max-width: 560px) {
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-card img, .photo-card--feature img { height: auto; aspect-ratio: 4/3; }
}

/* ---------- Nutzung / Use-Case ---------- */
.use-case { position: relative; overflow: hidden; background: var(--surface); }
.use-case::before, .use-case::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; }
.use-case::before { top: 0; background: var(--brand-red-d); }
.use-case::after { bottom: 0; background: var(--brand-slate); }
.use-case-inner { min-height: 420px; display: grid; place-items: center; text-align: center; padding: clamp(64px, 9vw, 112px) 24px; }
.use-case-copy { max-width: 820px; }
.use-case-lead { margin: 18px auto 0; max-width: 680px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink-muted); }
.use-case-tag {
  display: inline-block; margin: 26px 0 20px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid rgba(122,30,45,.35); background: rgba(122,30,45,.06); color: var(--brand-red-d);
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-underline-offset: 5px; }

/* ---------- Gebäude-Kennzahlen ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat-card {
  min-height: 130px; padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--brand-slate);
  border-radius: var(--radius); background: var(--card-bg); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.stat-card strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1; }
.stat-card span { color: var(--ink-muted); font-size: .8rem; }

/* ---------- Standort ---------- */
.address { font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-muted); margin-bottom: 22px; }
.location-note { max-width: 560px; color: var(--ink-muted); margin-bottom: 24px; }

/* ---------- Weitere Flächen ---------- */
.availability-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 5vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: end;
  background: var(--card-bg); box-shadow: var(--shadow);
}
@media (max-width: 700px) { .availability-card { grid-template-columns: 1fr; align-items: start; } }
.availability-list { display: grid; gap: 16px; }
.availability-card p { max-width: 620px; color: var(--ink-muted); margin-top: 12px; }

/* ---------- Exposé ---------- */
.expose-box { text-align: center; max-width: 720px; margin-inline: auto; }
.expose-box p { margin: 14px auto 0; max-width: 560px; color: var(--ink-muted); }
.expose-actions { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Abschluss-CTA ---------- */
.closing { padding: clamp(72px, 10vw, 132px) 0; text-align: center; background: var(--overlay-ink); color: #f6f6f4; position: relative; overflow: hidden; }
.closing::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-red), transparent); transform: rotate(-3deg); opacity: .8;
}
.closing-inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; }
.closing p { max-width: 620px; margin: 20px auto 28px; color: rgba(255,255,255,.74); font-size: 1.02rem; }

/* ---------- Print / Exposé ---------- */
.print-only { display: none; }
@page { size: A4; margin: 15mm; }
@media print {
  body { font-size: 10.5pt; color: #000; background: #fff; }
  header.site, footer.site, .dev-banner, .breadcrumb, .hero-actions,
  .floorplan-actions, .expose-actions, .closing, .media-dev-label,
  .mobile-actions, .nav-toggle, .screen-only { display: none !important; }
  .print-only { display: block !important; }
  .hero-media { min-height: 130mm; border: 0; border-radius: 0; break-inside: avoid; }
  .hero-panel { left: 10mm; bottom: 10mm; width: 110mm; padding: 8mm; border-radius: 0; }
  .section { padding: 10mm 0; break-inside: avoid; }
  .fact-strip { grid-template-columns: repeat(4, 1fr); }
  .fact, .stat-card { min-height: 24mm; padding: 5mm; border-radius: 0; }
  .media-placeholder--floorplan { min-height: 90mm; }
  .media-placeholder--map { min-height: 60mm; }
  a { text-decoration: none; }
}

/* ---------- Sticky Mobile-Aktionsleiste ---------- */
.mobile-actions {
  display: none; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  min-height: 64px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px rgba(20,28,32,.08);
  gap: 8px; transform: translateY(120%); transition: transform .24s ease;
}
.mobile-actions.is-visible { transform: translateY(0); }
.mobile-actions .btn { flex: 1; min-width: 0; min-height: 46px; padding-inline: 8px; font-size: .78rem; justify-content: center; }
.mobile-actions .btn:first-child { flex: .55; }
@media (max-width: 760px) { .mobile-actions { display: flex; } }

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 820px) {
  .section .section-head { grid-template-columns: 1fr; gap: 12px; }
  .fact-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-card, .photo-card--feature { grid-column: auto; }
  .photo-card img, .photo-card--feature img { height: 240px; }
  .availability-card { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Responsive: Mobil ---------- */
@media (max-width: 620px) {
  .hero-media { min-height: 560px; }
  .hero-panel { left: 14px; right: 14px; bottom: 14px; width: auto; padding: 22px 20px; }
  .hero-panel h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .hero-copy { font-size: .95rem; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
  .media-dev-label, .media-note-tag { top: 12px; right: 12px; max-width: 72%; text-align: right; }
  .fact-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fact { min-height: 100px; padding: 18px 16px; }
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-card img, .photo-card--feature img { height: auto; aspect-ratio: 4/3; }
  .floorplan-actions { flex-direction: column; }
  .use-case-inner { min-height: 380px; }
  .expose-actions { flex-direction: column; }
}