#bf-directory { --bf-yellow: #f0c000; }

/* Controls */
.bf-dir-controls { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bf-dir-controls .bf-dir-search { flex: 1 1 240px; }
.bf-dir-controls .bf-dir-berufsfeld { flex: 0 1 240px; }

/* Map */
.bf-dir-map { width: 100%; height: 260px; border-radius: 8px; margin-bottom: 1.25rem; }
@media (min-width: 577px) { .bf-dir-map { height: 360px; } }

/* Grid */
.bf-dir-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px) { .bf-dir-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }

/* Card */
.bf-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s; }
.bf-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.bf-card-logo { width: 100%; height: 100px; object-fit: contain; background: #f8f9fa; padding: .5rem; }
@media (min-width: 480px) { .bf-card-logo { height: 120px; } }
.bf-card-body { padding: .75rem 1rem .5rem; flex: 1; }
.bf-card-title { font-size: 1.05rem; margin: 0 0 .25rem; }
.bf-card-meta { color: #6b7280; font-size: .85rem; margin: 0 0 .5rem; }
.bf-card-free { font-weight: 600; margin: 0; }
.bf-empty { color: #6b7280; }
#bf-directory .bf-card-title { font-size: 1rem; line-height: 1.25; font-weight: 700; margin: 0 0 .25rem; }

/* Card CTA footer */
.bf-card-cta {
  padding: .65rem 1rem;
  background: var(--bf-yellow);
  color: #1a1a1a;
  font-size: .85rem;
  font-weight: 600;
  text-align: right;
  border-top: 1px solid rgba(0,0,0,.06);
  transition: background .15s;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.bf-card:hover .bf-card-cta { background: #e0b000; }

/* Detail page layout */
.bf-dir-detail { max-width: 780px; }

/* Hero photo — mobile-first: full-width, height auto, capped */
.bf-detail-hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
@media (min-width: 577px) { .bf-detail-hero { max-height: 280px; } }

/* Header: logo thumbnail + h2 */
.bf-detail-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bf-detail-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8f9fa;
  padding: .25rem;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .bf-detail-logo { width: 72px; height: 72px; }
}
.bf-detail-head h1, .bf-detail-head h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 577px) {
  .bf-detail-head h1, .bf-detail-head h2 { font-size: 1.5rem; }
}

/* Chips — wrap naturally on any width */
.bf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: .875rem;
}
.bf-chip {
  display: inline-block;
  padding: .3rem .7rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
  min-height: 30px;
}
.bf-chip--free { background: #d1fae5; color: #065f46; }
.bf-chip--full { background: #fee2e2; color: #991b1b; }
.bf-chip--field { background: #fef9c3; color: #713f12; }

/* Detail sections */
.bf-detail-section {
  margin-bottom: 1.5rem;
}
.bf-detail-section h2, .bf-detail-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--bf-yellow);
  display: inline-block;
}

/* Rich-text company description */
.bf-detail-desc {
  color: #374151;
  line-height: 1.65;
}
.bf-detail-desc h1,
.bf-detail-desc h2,
.bf-detail-desc h3,
.bf-detail-desc h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 .35rem;
}
.bf-detail-desc p { margin: 0 0 .75rem; }
.bf-detail-desc ul,
.bf-detail-desc ol { padding-left: 1.4rem; margin: 0 0 .75rem; }
.bf-detail-desc a { color: #1a56db; text-decoration: underline; }

/* Jobs list */
.bf-detail-jobs {
  margin: 0;
  padding-left: 1.4rem;
  color: #374151;
}
.bf-detail-jobs li { margin-bottom: .25rem; }

/* Programme text — preserves line breaks */
.bf-detail-program {
  white-space: pre-line;
  color: #374151;
  line-height: 1.65;
  margin: 0;
}

/* VVS widget — responsive, never causes horizontal scroll */
.bf-vvs { margin: 0; }
.bf-vvs-wrap {
  width: 100%;
  overflow: hidden;
}
.bf-vvs iframe {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 400px;
  border-radius: 6px;
  border: 0;
}

/* Booking CTA */
.bf-detail-cta {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem 1rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  text-align: center;
}
@media (min-width: 577px) { .bf-detail-cta { padding: 1.5rem; } }
.bf-detail-cta-btn {
  display: block;
  width: 100%;
  padding: .875rem 1.5rem;
  background: var(--bf-yellow);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  min-height: 48px;
  line-height: 1.3;
  transition: background .15s, transform .1s;
  box-sizing: border-box;
}
@media (min-width: 480px) {
  .bf-detail-cta-btn { display: inline-block; width: auto; }
}
.bf-detail-cta-btn:hover { background: #e0b000; color: #1a1a1a; transform: translateY(-1px); }
.bf-detail-cta-note {
  margin: .75rem 0 0;
  color: #6b7280;
  font-size: .85rem;
}

/* Back link */
.bf-back { color: #4b5563; font-size: .9rem; text-decoration: none; }
.bf-back:hover { text-decoration: underline; }

/* Legacy (kept for compatibility) */
.bf-anmelden { background: var(--bf-yellow); border-color: var(--bf-yellow); color: #1a1a1a; font-weight: 700; }