/*
  Tuchfabrik Berlin — Freie-Flächen-Übersicht
  Filter laufen rein clientseitig als UI-Zustand (kein eigener URL-Zustand,
  siehe Technischer Architekturstand Abschnitt 06 "Filter & Facetten").
*/

.ff-hero { padding: clamp(48px, 7vw, 80px) 0 clamp(32px, 5vw, 48px); border-bottom: 1px solid var(--line); }
.ff-hero h1 { max-width: 20ch; }
.ff-hero .lede { margin-top: 14px; max-width: 64ch; }

.ff-body { padding: clamp(40px, 6vw, 64px) 0 clamp(64px, 8vw, 96px); }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; }
.filter-bar .filter-label { font-size: .8rem; font-family: var(--font-body); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.filter-pill {
  font: inherit; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--brand-line); background: var(--card-bg); color: var(--brand-ink); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.filter-pill:hover { border-color: var(--brand-red-d); color: var(--brand-red-d); }
.filter-pill[aria-pressed="true"] { background: var(--brand-red-d); color: #fff; border-color: var(--brand-red-d); }
.filter-note { font-size: .8rem; color: var(--ink-faint); margin: 0 0 32px; }

.ff-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 980px) { .ff-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .ff-grid { grid-template-columns: 1fr; } }

.ff-card {
  background: var(--card-bg); border: 1px solid var(--line); border-top: 3px solid var(--brand-stripe-gray);
  border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink); min-height: 210px; transition: box-shadow .15s ease, transform .15s ease;
}
.ff-card:not(.placeholder) { border-top-color: var(--brand-red-d); }
.ff-card:not(.placeholder):hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ff-card .fnum { font-family: var(--font-body); font-size: .78rem; color: var(--ink-faint); }
.ff-card .fsize { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.ff-card .fuse { font-size: .88rem; color: var(--ink-muted); }
.ff-card .fprice { font-size: .84rem; color: var(--ink-muted); }
.ff-card .fstatus { font-size: .82rem; margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 5px; }
.ff-card .fstatus.frei { color: var(--status-frei); font-weight: 600; }
.ff-card .fstatus.prep { color: var(--ink-faint); }
.ff-card .fstatus.ab { color: var(--status-prep); font-weight: 600; }
.ff-card .fgo { font-size: .82rem; font-weight: 600; }
.ff-card.placeholder { color: var(--ink-faint); cursor: default; }
.ff-card.placeholder .fsize { color: var(--ink-faint); font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.ff-card.reserved .fsize { color: var(--brand-slate); font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; }
.ff-card[hidden] { display: none; }

.ff-empty { display: none; text-align: center; padding: 48px 0; color: var(--ink-faint); font-size: .95rem; }
.ff-empty.is-visible { display: block; }

.ff-final { margin-top: 56px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ff-final p { margin: 0; color: var(--ink-muted); font-size: .92rem; max-width: 50ch; }