.media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}

/* Card */
.media-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border-radius:12px;

  background:#fff;
  border:1px solid #e5e5e5; /* wie ls-item in kirche.css :contentReference[oaicite:2]{index=2} */
  box-shadow:0 2px 8px rgba(0,0,0,0.06);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Hover-Effekt: „lift“ + Theme-Rand */
.media-card:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
  border-color:#819BCB; /* Theme-Farbe aus kirche.css :contentReference[oaicite:3]{index=3} */
}

.media-card__meta{
  min-width:0;
  flex:1;
}

.media-card__title{
  font-size:1.2rem;
  font-weight:700;
  line-height:1.4;

  white-space:wrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.media-card__controls{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Button im Stil der vorhandenen Controls (ls-btn: border #ccc, bg #fff) :contentReference[oaicite:4]{index=4} */
.media-card__button{
  width:36px;
  height:36px;
  border-radius:999px;

  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  line-height:1;

  transition: transform 80ms ease, background-color 140ms ease, border-color 140ms ease;
}

.media-card__button:hover{
  background-color: rgba(165,184,218,0.35); /* #A5B8DA in „soft“ :contentReference[oaicite:5]{index=5} */
  border-color:#819BCB;
}

.media-card__button:active{
  transform: scale(0.98);
}

.media-card__button[aria-pressed="true"]{
  background-color: rgba(129,155,203,0.25); /* #819BCB soft :contentReference[oaicite:6]{index=6} */
  border-color:#819BCB;
}

/* Audio-Element ausblenden (Button steuert Play/Pause) */
.media-card__audio{
  display:none;
}