/* Grundlayout */
.bvs-card {
  border: 1px solid var(--bvs-border, #e6e6e6);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bvs-link { display: grid; text-decoration: none; color: inherit; }

/* Mobile-first: Bild oben, Text darunter */
.bvs-link {
  grid-template-rows: auto 1fr;
}
.bvs-media { position: relative; }
.bvs-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;      /* verhindert CLS */
  object-fit: cover;
  background: #f5f5f5;
}
.bvs-image--placeholder { background: linear-gradient(180deg,#f2f2f2,#e9e9e9); }

.bvs-body { padding: 14px 16px 16px; background: #ffffff; }
.bvs-title { font-size: clamp(1rem, 2.8vw, 1.125rem); line-height: 1.25; margin: 0 0 6px; color: #000000; }
.bvs-excerpt { margin: 0; font-size: .95rem; color: #000000; }

/* Hover/Fokus */
.bvs-card:hover,
.bvs-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Ab ~640px: zweispaltig nebeneinander */
@media (min-width: 640px) {
  .bvs-link {
    grid-template-columns: 40% 1fr;
    grid-template-rows: 1fr;
  }
  .bvs-media { min-height: 100%; }
  .bvs-image { height: 100%; }
}

/* Ab ~1024px: etwas kompakter */
@media (min-width: 1024px) {
  .bvs-body { padding: 16px 18px 18px; }
  .bvs-title { font-size: 1.125rem; }
}

/* Optional: Dark Mode */
@media (prefers-color-scheme: dark) {
  .bvs-card { background: #111; border-color: #222; }
  .bvs-body { background: #ffffff; }
  .bvs-title, .bvs-excerpt { color: #000000; }
}

  .bvs-excerpt { color: #c9c9c9; }
}


/* Liste/Grids */
.bvs-list {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .bvs-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .bvs-list { grid-template-columns: repeat(3, 1fr); }
}