/* Bauprojekte: Filter, Nachtkarte, Liste (nur bauprojekte.html) */
.bp-abschnitt { padding-top: 32px; }
.bp-filter { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr 1.6fr; gap: 12px; margin-bottom: 20px; }
.bp-filter label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--leise); }
.bp-filter select, .bp-filter input { height: 52px; width: 100%; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: #fff; padding: 0 16px; font: 500 16px var(--sans); color: var(--tinte); }
.bp-filter select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.bp-filter select:focus, .bp-filter input:focus { outline: 2px solid var(--tinte); outline-offset: 1px; }

.bp-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; border: 1px solid var(--rand); height: 720px; }
.bp-karte { position: relative; background: radial-gradient(700px 520px at 40% 50%, #141d38, #0b1020); color: #d7dbe6; padding: 32px 34px; display: flex; flex-direction: column; min-height: 0; }
.bp-karte > div { position: relative; z-index: 1; }
.bp-zahl { font-size: clamp(56px, 5.6vw, 88px); line-height: .95; font-weight: 700; color: #fff; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.bp-text { color: #a1a7b8; margin-top: 10px; font-size: 15.5px; max-width: 34ch; }
.bp-karte canvas { position: absolute; inset: 96px 16px 44px 16px; width: calc(100% - 32px); height: calc(100% - 140px); }
.bp-stand { margin-top: auto; position: relative; z-index: 1; color: #8c93a6; font-size: 13.5px; }

.bp-liste-rahmen { background: #fff; overflow-y: auto; padding: 8px 0 20px; min-height: 0; }
.bp-liste { list-style: none; }
.bp-liste li { padding: 18px 26px; border-bottom: 1px solid var(--grau-2); }
.bp-liste li.ist-an { background: #fbf8f2; }
.bp-liste small { display: block; color: var(--leise); font-size: 13.5px; }
.bp-liste p { color: var(--tinte); font-size: 16px; line-height: 1.45; margin: 4px 0 8px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bp-chips span { font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--grau); border-radius: 8px; padding: 3px 9px; }
.bp-chips span.gross { background: #f4ecdd; color: var(--licht-text); }
.bp-fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14px; }
.bp-fuss b { color: var(--tinte); font-weight: 600; margin-right: auto; }
.bp-fuss a { font-weight: 600; color: var(--tinte); text-decoration: underline; text-decoration-color: var(--rand); text-underline-offset: 3px; }
.bp-fuss a:hover { text-decoration-color: var(--tinte); }
.bp-leer { color: var(--leise); text-align: center; padding: 60px 26px !important; border: 0 !important; }
.bp-mehr { display: flex; margin: 18px auto 0; }
.bp-hinweis { color: var(--leise); font-size: 14px; margin-top: 14px; }

.bp-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bp-schritte .service-block { display: flex; flex-direction: column; gap: 10px; }
.bp-schritte .text-link { margin-top: auto; padding-top: 6px; }
.bp-nr { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #cfcfd4; display: grid; place-items: center; font-weight: 700; color: var(--tinte); font-size: 15px; }

@media (max-width: 1000px) {
  .bp-filter { grid-template-columns: 1fr 1fr; }
  .bp-suche { grid-column: 1 / -1; }
  .bp-buehne { grid-template-columns: 1fr; height: auto; }
  .bp-karte { min-height: 460px; }
  .bp-liste-rahmen { max-height: 640px; }
  .bp-schritte { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bp-filter label:first-child { grid-column: 1 / -1; }
  .bp-karte { min-height: 520px; padding: 24px 20px; }
  .bp-karte canvas { inset: 150px 4px 40px 4px; width: calc(100% - 8px); height: calc(100% - 190px); }
  .bp-liste li { padding: 16px 18px; }
  .bp-buehne { border-radius: 22px; }
}